Cara Mudah Membuat Related Post Blogger

Baca Juga

Related Post, Posting Terkait, Artikel Terkait, atau You Might Also Like adalah navigasi halaman blog sekaligus internal link. Berikut ini Cara Mudah Membuat Related Post Blogger.

Related Post bagus buat SEO. Ia juga bagus untuk mengurangi bounce rate dan menaikkan pageviews ataupun durasi pengunjung membuka-buka blog kita.

Kode related post berikut ini desain simple, sehingga Fast Loading, Bebas Injeksi Link. Banyak lho kode related post yang dibagikan disisipi link! Teliti sebelum memilih kode!

Cara Mudah Membuat Related Post Blogger

VERSI SIMPLE

Cara memasangnya:

1. Tema > klik Panah > Edit HTML

2. Copas kode berikut ini di Atas kode </head>

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib79maqeA2_d2otagWOfNilBhZny-ERclbEpq41_nd8xm98ZptxSRp5esIS52Y5Af5YxCCJmaqVFt7qg7k32sCR8XyoHMidA7U4b2OP9138qab5yQEJTCMn2VleV7Lti75B1oBDTqZMlc/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style>

<script type='text/javascript'>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>');document.write('<a style="font-size:1px;font-color:#FF0000;" rel="dofollow" href="http://contohblognih.blogspot.com/">Tutorial Blog</a></font>');}

</script>

3. Copas kode related post blog berikut ini di bawah kode <data:post.body/>

<br/><br/><b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </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>

4. Save!

Beres. 

Demikian Cara Mudah Membuat Related Post Blogger. Related Post ini harus dipasang sendiri, kalau kita menggunakan template blog bawaan Blogger. Template Premium mah sudah ada.