Trik Pasang Related Posts di Blogger

Related posts atau biasa juga disebut dengan artikel yang berkaitan atau berhubungan adalah salah satu navigasi yang bisa diterapkan untuk memudahkan pengunjung dalam mencari tulisan lain pada blog yang berkaitan dengan artikel yang sedang dibacanya.

Pada blogger untuk menampilkan navigasi ini biasanya menggunakan label sebagai acuanya. Misalkan pada tulisan yang sedang anda baca ini "Trik Pasang Related Posts di Blogger" saya beri label Tips blogger, maka nantinya related posts yang ditampilkan adalah semua postingan pada label "Tips Blogger" dan juga bisa kita atur berapa postingan yang akan ditampilkan (hanya judulnya saja).

Cara Pasang Related Posts di Blogger

Langkah awalnya adalah dengan menambahkan kode javascript dengan cara login ke account blogger dan masuk pada tab Rancangan -> Edit HTML, cari kode </head> dan letakan script dibawah ini tepat diatas tag </head> tersebut.

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

Ket : kode diatas sudah dicompress

Langkah selanjutnya menambahkan style (CSS) untuk related postsnya. caranya cari lagi kode ]]></b:skin> dan sisipkan kode css berikut tepat diatas ]]></b:skin>.

/* RELATED-POSTS */
#rel-posts {font : 11px Verdana;border: 1px solid #ccc; margin-top: 20px;}
#rel-posts .widget h2, #rel-posts h2 {color : #940f04;background: #f4f4f4;font-size : 20px;font-weight : normal;margin : 0 ;padding : 5px ;border-bottom:1px solid #ccc;border-top:0;}
#rel-posts a {color : #054474;font-size : 11px;text-decoration : none;}
#rel-posts a:hover {color : #054474;text-decoration : none;}
#rel-posts ul {margin : 0;padding : 0;padding-left: 5px;}
#rel-posts ul li {line-height : 2em;border-bottom:1px dotted #cccccc;display: block;}
#rel-posts ul li:last-child{ border-bottom:none}

Tips : Sesuaikan kode tersebut dengan template yang anda gunakan.

Dan langkah terakhir yaitu memanggil/meletakan related posts dibawah postingan, masih dalam tab Edit HTML cari kode <data:post.body/> dan letakan kode berikut tepat dibawah <data:post.body/>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='rel-posts'>
<h2>Artikel yang Berkaitan</h2>
<b:loop values='data:post.labels' var='label'>
<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:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script>
</div>
</b:if>

Tips :

• Artikel yang Berkaitan -> Judul dari Related Post, bisa diganti sesuai keinginan
• 5 -> Jumlah postingan yang ingin ditampilkan, juga bisa diganti.

Simpan template anda dan coba lihat hasilnya apakah sudah sesuai atau belum. Jika tampilannya belum sesuai itu biasanya karena template masing-masing berbeda dan untuk mengatasinya coba edit css related post diatas agar sesuai dengan template yang anda gunakan.

Selamat Mencoba !

Dapatkan update terbaru: * Cek email konfirmasi untuk berlangganan yang telah dikirimkan ke email anda