CARA MEMASANG WIDGET RELATED POST PADA BLOG

BLOGGER MANIA. Pemasangan widget Related Post pada sebuah blog pada dasarnya sangat diperlukan dalam rangka memperkecil prosentase Bounce-rate blog sekaligus untuk meningkatkan pageviews blog yang bersangkutan. Pageviews blog ini menjadi penting dalam upaya untuk memperkecil (baca menaikkan) peringkat Alexa sebuah blog. Tujuan lain pemasangan widget ini adalah untuk mempermudah para visitor kita dalam mengakses artikel-artikel blog yang memiliki label atau kategori yang sama.

Banyak tutorial tentang cara memasang widget ini, namun pada kesempatan ini saya akan memberikan cara membuat widget Related Post dengan cara yang paling sederhana serta ringan (tidak memperberat loading blog). Beginilah cara membuatnya :

Log in ke blog anda > pilih Template > pilih Edit HTML, kemudian carilah kode ]]></b:skin>, letakkan kode atau script berikut ini di atasnya :

Kode Script:

#related-posts { float : left; width : 100%; margin-top:5px; margin-left : 0px; font-size : 13px; font-family:Arial,serif; margin-bottom:0px; }
#related-posts a { text-decoration : none; }
#related-posts a:hover { text-decoration : none; }
#related-posts ul { border : medium none; margin : 10px 0px 10px 0px; padding : 0; }
#related-posts ul li { display : block; background : url("https://lh3.googleusercontent.com/-6iznc81V_pQ/UcmgB6yKU3I/AAAAAAAABWc/NhxmD6789YU/s25/rss.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 30px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; }

Langkah berikutnya carilah kode </head> dan letakkan kode berikut ini di atasnya :

Kode Script:

<!-- Related Post Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>
</b:if>
<!-- Related Post End-->

Langkah terakhir, carilah kode <div class='post-footer'> yang kedua, dan letakkan kode script berikut di bawahnya  :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font style='font-size:19px; color:#CC333B; font-family:Arial;'><b>Artikel Terkait: </b>
</font><font color='#fff'><b:loop values='data:post.labels' var='label'><data:label.name/>
<b:if cond='data:label.isLast != &quot;true&quot;'/><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>

Demikianlah tutorial tentang cara memasang Widget Related Post (sederhana) ini, semoga bermanfaat.