Membuat Related Posts Pada Blogger

Niat Ngeblog - Ada beberapa cara yang bisa kita diterapkan untuk membuat Related Post. Selain kita bisa membuat Related Post disertai gambar, kali ini kita akan belajar bagaimana caranya membuat Related Post yang berupa urutan link judul artikel saja yang akan kita letakkan dibawah artikel kita.

Ikuti langkah-langkah berikut ini :

1. Seperti biasanya, masuk lah dulu kedalam account blog anda.

2. Pilih menu Design dan pilih Edit HTML.

3. Aktifkan tanda "Expand Template" dengan memberi tanda cek pada kotak yang tersedia.

4. Tekan Ctrl + F dan temukan kode </head> kemudian letakkan kode dibawah, tepat diatas kode </head>

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

5. Berikutnya adalah menambahkan style (CSS). Cari kode ]]></b:skin> dan letakkan kode berikut 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}

6. Terahkir, letakkan kode berikut tepat dibawah kode <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>

7. Save template dan lihat lah pada tampilan post anda.

Selamat mencoba.

Note : Baca juga artikel “Membuat Related Posts Dengan Gambar”.