Cara Membuat Related Post / Artikel Berada di Sidebar

Pada tutorial blog sebelumnya, saya memberikan tutorial mengenai Cara Buat Related Post atau Artikel Terkait, sekarang saya akan memberikan tutorial blog tentang Cara Buat Related Post atau Artikel Terkait juga akan tetapi antara Related Post pertama dengan yang Related Post yang sekarang beda. Dimana Letak bedanya? Related post sebelumnya tampil di bawah postingan atau artikel, Related Post sekarang tampil di Sidebar sebagai widget. Tanpa banyak basa basi, kita langsung praktik saja.

Cara buat Related Post di Sidebar:

• Login ke http://www.blogger.com/
• Pilih Rancangan dan klik Edit HTML
• Download template lengkap dulu untuk jaga-jaga kalau ada kesalahan.
• Beri tanda centang pada Expand Widget Template.
• Copy kode berikut di atas kode </head>

Inilah Kodenya :

1. <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>  

• Langkah selanjutnya, cari kode berikut :

Inilah kodenya :

1. <b:if cond='data:post.labels'>  
2. <data:postLabelsLabel/>  
3. <b:loop values='data:post.labels' var='label'>  
4. <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>  
5. </b:loop>  
6. </b:if>  

• Kalau sobat blogger sudah menemukan kode tersebut, HAPUS lalu ganti dengan kode di bawah ini

Inilah Kodenya :

1. <b:if cond='data:post.labels'>  
2. <data:postLabelsLabel/>  
3. <b:loop values='data:post.labels' var='label'>  
4. <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>  
5. <b:if cond='data:blog.pageType == "item"'>  
6. <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=20"' type='text/javascript'/> </b:if> </b:loop> </b:if>   

• Save template sobat.

Praktik belum selesai, masih ada proses yang harus kita lakukan lagi, yaitu kita menambahkan kode Java Script di dalam kolom widget : Untuk menambahkan kode tersebut di kolom widget, tentunya sobat blogger harus berada di layout - Klik Add a Gadget - HTML java Script dan paste kode di bawah ini di kolom yang tersedia

Inilah Kodenya :

1. <script type="text/javascript"> removeRelatedDuplicates(); printRelatedLabels(); </script>  

• Terakhir klik Simpan

Tidak menutup kemungkinan, proses yang terlalu panjang membuat sobat blogger kesulitan. Jadi mamfaatkan kolom di bawah ini untuk bertanya.

Artikel Terkait