Cara Membuat Related Post Dengan Atau Tanpa Scrolling Dan Tanpa Thumbnail

Menambah tutorial lagi.. berhubung ada sahabat blogger iplock yang bertanya "oia kang,ane pngn di scroll dong yang artikel terkaitnya.

jadi ga panjang yang diblog ane ntu,ntuh digimanain ya??? ".... baiklah akan dibahas sekalian di postingan kali ini
 

Artikel Terkait (Related Post) adalah suatu daftar beberapa judul artikel yang masih ada hubungannya dengan judul artikel yang sedang dibaca pada saat itu.. dan biasanya terletak langsung dibawah artikel tersebut

Script Artikel Terkait yang saya gunakan mungkin berbeda dengan yang sobat blogger lain gunakan... karena memang sebenarnya ada beberapa kode script yang berbeda untuk menampilkan Artikel Terkait (Related Post)... tetapi untuk menambahkan scrolling pada artikel terkait dengan daftar yang panjang menggunakan trik script scrolling yang sama saja... masih binggung

Tanpa panjang lebar lagi... Pahami langkah-langkahnya berikut ini :
1. Seperti biasa Login ke Blogger > Rancangan > Edit HTML > Edit Template ( centang expand template widget )
2. Backup dahulu template widget-nya ke notepad ( untuk antisipasi )...
3. Tekan Control+F lalu Copas kode ini " </head> " tinggal dicari dengan klik Next / Previous ( jika memakai Mozilla Firefox )
4. Jika sudah ketemu lalu Copy kode dibawah ini diatas " </head> " ...

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

5. Paste -kan seperti contoh dibawah ini...

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

</head>

6. Kemudian Cari lagi kode ini " <data:post.body/> " seperti langkah ke- 3 diatas lalu Copy lagi kode dibawah ini sesudahnya...

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h4><i>Tutorial blogging lainnya...</i></h4>

<div style='border: 1px solid rgb(204, 204, 204); margin: 10px 0px; padding: 10px; -moz-border-radius: 10px 10px 10px 10px; width: auto; height: auto; background-color: rgb(223, 245, 234); '>

<div style='border: 0px solid rgb(153, 153, 153); overflow: auto; width: 500px; height: 180px; text-align: left; '>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>

</div>

</b:if>

7. Paste seperti contoh dibawah ini

<data:post.body/>

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h4><i>Tutorial blogging lainnya...</i></h4>

<div style='border: 1px solid rgb(204, 204, 204); margin: 10px 0px; padding: 10px; -moz-border-radius: 10px 10px 10px 10px; width: auto; height: auto; background-color: rgb(223, 245, 234); '>

<div style='border: 0px solid rgb(153, 153, 153); overflow: auto; width: 500px; height: 180px; text-align: left; '>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>

</div>

</b:if>

PERHATIKAN :
> Hitam ;
- Tutorial blogging lainnya... = Gantilah judulnya sesuai dengan keinginanmu...
- "max-results=5" = Ubah nilainya, untuk menentukan banyak artikel terkait yang akan ditampilkan..

> Biru = script ini untuk membuat border kolom pada artikel terkait.. bisa kamu ubah-ubah warnanya di backround-color.. kalau saya menggunakan warna hijau muda... bisa juga kamu atur border, moz-border-radius, dsb... atau bisa juga kamu HAPUS script border kolom ini jika tidak mau memakainya...

> Hijau = Script ini untuk fungsi SCROLLING... bisa kamu atur sesuai keinginan kamu Height, Widht, Border, serta text-align-nya... atau bisa juga kamu HAPUS script scrolling ini jika kamu tidak suka memakai scrolling...

Ket : baik kode script border kolom & kode script Scrolling ini bisa juga diterapkan di kode script related post lainnya.. maksudnya yang mungkin agak berbeda dengan kode script related post yang saya gunakan seperti diatas...

8. Jika sudah selesai.. Simpan Template & Resfresh blognya...

Di pahami benar2 dulu ya