Membuat Related Post di Blog

Membuat Related Post di Blog - Related Post atau Artikel terkait yg berisi daftar postingan yang berhubungan atau berkaitan dengan postingan yang anda baca.

Related Post di Blog sangat berguna bagi pengunjung blog anda, karena agar pembaca tidak langsung keluar meninggalkan bacaan yang sedang di baca, melainkan membaca juga artikel lainnya yang berkaitan.

Berikut akan saya berikan cara pemasangan Related Post di blog :

1. Masuk ke Akun Blog anda, kemudian dari dashboard pilih Rancangan, lalu klik Edit HTML untuk menjaga kemungkinan Terburuk dalam kesalahan memasang code CSS silahkan backup template anda terlebih dahulu dengan mengmemilih Download Template Lengkap, jika sudah silahakan beri tanda centang di Expand Template Widget.

2. Cari kode ]]></b:skin>, lalu tempatkan kode CSS berikut sebelum kode tersebut .

#related-posts{background:#E0F8E0 url() repeat-x top;float:left;width:610px;margin-top:10px;font:11px Verdana;border:1px solid #5858FA;padding:10px}
#related-posts .widget{list-style-type:square;margin:5px 0;padding:0}
#related-posts a{color:#054474;font-size:11px;text-decoration:none}
#related-posts a:hover{color:#000;text-decoration:none}
#related-posts,.widget{margin-bottom:1em}

Anda bisa merubah ukuran box pada menu Related post dengan mengganti angka yg berwarna merah. Saya memakai ukuran 320px.

3. Tambahkan script berikut sesudah kode ]]></b:skin> :

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

4. Yang terakhir cari kode <data:post.body/>. Kemudian kode berikut sebelum kode <div style='clear: both;'/> <!-- clear for photos floats --> .

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='2'><b>Artikel Terkait : </b></font>
<font color='#FFFFFF'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
<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>
</font>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>

Kemudian simpan template anda dan lihat hasil di salah satu postingan anda.

Semoga bermanfaat