Cara Membuat Related Post dengan Thumbnail untuk Blogger 2016

Related post/artikel terkait sangat penting dalam sebuah posting blog. Tujuannya untuk membuat pengunjung blog lebih lama membuka blog kita ketika dia menemukan artikel terkait yang menarik perhatiannya.

Artikel terkait dibuat berdasarkan posting yang memiliki label yang sama. Jadi, tanpa perlu membuka menu di blog, pengunjung dapat mengetahui apa saja isi dari label yang sama dari posting yang barusan dibacanya. Untuk mempersingkat waktu, berikut adalah tutorial membuat widget Related post yang kita letakkan dibawah postingan, dan ini sungguh sangat bekerja pada blog saya.

1. Login ke akun Blogger kita dan pilih menu Template --> Edit HTML

2. Dengan CTRL+F, cari kode </head>

3. Kopi pastekan script berikut di atas kode </head>

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts h4{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:110px;height:100px;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#333;text-align:center;text-transform:capitalize;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5AR8gb6oGEUOVcs9ZjfJXFwgvcrPVLh5uNUrOTW-smRTlL7HadqCxkHW2T4MubDbpo6zzv3MtiHhQ6iz-71vVfNsG4KOkTJ_IKcGbQg1FeGDZ450aix3-SMtJ-HA3gF6gpnVR9-7v0sFg/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>35)
relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h4>'+relatedpoststitle+'</h4>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
</b:if>

4.Dengan CTRL+F cari lagi kode berikut <div class='post-footer'>. Biasanya ada lebih dari satu <div class='post-footer'>. Pilih yang kedua, atau bisa juga dicoba satu persatu.

5.Kopi pastekan script berikut diatas <div class='post-footer'>

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="<b>Related Posts:</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style="font-size: 9px;float: right; margin: 5px;"><a style="font-size: 9px; text-decoration: none;" href="http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html" rel="nofollow" >Related Posts Widget</a></div>
</b:if>

6. Untuk beberapa template blog, kopi paste script no. 5 diatas <div class='post-footer'> tidak bekerja, alias tdak cocok dengan template blognya, sehingga related post tidak tampil. Untuk mengatasi masalah ini, kita letakkan script nomor 5 di tempat lain sesuai petunjuk no. 7 berikut.

7. Cari kode <b:includable id='postQuickEdit' var='post'>, dan copy pastekan script n. 5 diatas kode </b:includable> yang terletak tepat diatas <b:includable id='postQuickEdit' var='post'>. atau lebih jelasnya lihat screenshot berikut :

Selamat mencoba, and Happy Blogging !

ADS HERE !!!