Memasang Related Post Di Blogger

RAMPEDIAKU.ME - Tutorial Ini Sebenernya Sudah Banyak Yang Share Di Blog Lain, Tapi Karna Belum Pernah Dibuat Disini Makanya Saya Buat Saja :D

Ditutorial ini saya memakai script untuk memasang artikel terkait (Related Post) di tengah-tengah postingan blog. Nah langsung saja dicoba tutorial kali ini.

Menampilkan Related Post Di Blogger

Kode CSS

Salin dan tempel kode CSS berikut ini tepat diatas kode ]]></b:skin> atau bisa kode <style>.

#related-posts{float:left;width:100%;border-bottom:0px solid #888;border-top:0px solid #88daed;margin:5px 0 10px;padding:15px 0 10px}
#related-posts .widget h2,#related-posts h3{font:18px Oswald;color:#000;text-transform:none;margin:0 0 10px;padding:0}
#related-posts a{color:#0973CF;font:12px Verdana}
#related-posts li{background:url(http://2.bp.blogspot.com/-EcBIblBtYTQ/TqALuRS_IzI/AAAAAAAAAx0/E-vzWTTOgXs/s1600/bullet-list.gif) no-repeat 0 10px;text-indent:0;line-height:1.3em;border-bottom:1px dotted #ccc;margin:0;padding:3px 0 8px 12px}
#related-posts a:hover{color:#c00;text-decoration:none}
#related-posts .widget{margin:0;padding:0}
#related-posts ul{list-style:none;margin:0;padding:0}

Kode Javascript

Silakan salin dan tempel kode javascript ini tepat sebelum/diatas kode </head>.

<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<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(a){for(var b=0;b<relatedUrls.length;b++){if(relatedUrls[b]==a){relatedUrls.splice(b,1);relatedTitles.splice(b,1)}}var c=Math.floor((relatedTitles.length-1)*Math.random());var b=0;if(relatedTitles.length>1){document.write("<h3>"+relatedpoststitle+"</h3>")}document.write("<ul>");while(b<relatedTitles.length&&b<20&&b<maxresults){document.write('<li><a href="'+relatedUrls[c]+'">'+relatedTitles[c]+"</a></li>");if(c<relatedTitles.length-1){c++}else{c=0}b++}document.write("</ul>");relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length)};
//]]>
</script>

Pasang Related Post

Temukan kode <data:post.body/> pada kode HTML blog kamu dan tempatkan kode dibawah ini tepat setelah/dibawahnya. Kode <data:post.body/> mungkin ada lebih dari 1 pada kode HTML blog anda, biasanya gunakan kode yang kedua, atau jika gagal silakan coba kode yang selanjutnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<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=8&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var maxresults=6;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div><div class='clear'/>
</b:if>

Setelah selesai semua, silakan periksa salah satu posting yang terdapat di blog kamu, kemudian scroll kebawah untuk menampilkan bagian paling bawah dari halaman posting tersebut. 

jika berhasil kamu akan menemukan beberapa posting yang mempunyai lama sama dengan halaman posting yang saat ini anda buka.

Jika gagal, ada beberapa hal yang bisa menjadi penyebabnya. kesalahan penempatan kode bagian ke (5.), temukan kode <data:post.body/> yang tepat lalu periksa lagi.

Mungkin itu beberapa langkah-langkah untuk memasang sebuah related post yang sederhana di Blogger, Semoga cara diatas mudah dipahami bagi para pengunjung.

Kalian dapat bertanya ke mimin dan request untuk artikel selanjutnya memalui halaman contact blog ini.

BloggerTipsTutorial

Share This :