Cara Tambah Related Posts Widget Untuk Blogger dengan Thumbnail

Sekarang di sini adalah tutorial yang untuk menampilkan related post di bawah setiap posting blog Anda, bersama dengan thumbnail. Related Posts dipilih dari posting lain yang sama kategori/label/tag.

Dengan Cara ini banyak pembaca Anda akan tetap di situs Anda untuk waktu yang cukup lama ketika mereka melihat Related Posts sesuai kepentingan.

Menambahkan Related Posts Widget untuk Blogger/Blogspot

Langkah 1. Masuk ke Anda akun Blogger dan pergi ke Template> Edit HTML

Cara Tambah Related Posts Widget Untuk Blogger dengan Thumbnail

Langkah 2. Klik di mana saja di dalam area kode dan tekan tombol CTRL + F:

Langkah 3. Cari potongan kode ini menambahkan di dalam kotak pencarian (tekan Enter untuk menemukannya):

</head>

Langkah 4. Copy dan paste kode di bawah sebelum / di atas </ head> tag:

<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/AVvXsEhGYOWX7HaF9OsUPgAs_i38swp6FefTL7nBP335l23uFRgJ2Nuvb7unrmb4lWUi84InKN-6IncyqzQX15W3E9qpPDJ8ek-SVsbhs3MDPu7nAOuIRZ_AoX_tizy_pqp1SoylUQmGyzFjo59Q/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>

Catatan:

- untuk mengubah lebar dan tinggi thumbnail, Ubah 110 px dan 100 px yang berwarna merah

- untuk mengubah warna dan ukuran judul Related Posts, mengubah nilai dalam biru

- Hapus bagian berwarna ungu jika Anda ingin Related post yang akan ditampilkan baik di homepage dan halaman posting.

Langkah 5. Cari baris dibawah (Anda akan menemukannya dua baris, tetapi Anda cukup pilih yang pertama):

<div class='post-footer'>

Langkah 6. Tepat di atas <div class = 'post-footer'> sisipkan kode ini:

<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://duniatutorials.blogspot.co.id/2016/08/cara-tambah-related-posts-widget-untuk.html" rel="nofollow" >Related Posts Widget</a></div>

</b:if>

Catatan:

- Ubah nilai 5 dari max-results = 5 sesuai dengan jumlah postingan yang ingin ditampilkan

- jika Anda ingin Related Posts yang akan ditampilkan pada homepage juga, hapus bagian yang berwarna ungu

Update! Jika Anda tidak dapat melihat widget related posts setelah menyimpan template, Tambahkan kode (langkah 6) tepat di atas </ b: includable> tag yang dapat ditemukan di atas garis ini (CTRL + F untuk menemukannya):