Cara Menambahkan Widget Related Posts Di Blogger Dengan Thumbnail

Cara Menambahkan Widget Related Posts Untuk Blogger Dengan Thumbnail

 

Berikut Cara Menambahkan Widget Related Posts Untuk Blogger / Blogspot

Sekarang di sini adalah cara yang indah untuk menampilkan posting blog Anda, bersama dengan thumbnail. Artikel terkait dipilih dari posting lain  yang sama dalam kategori / label / tag. Dengan  ini akan mengundang  banyak pembaca Anda akan tetap di situs Anda untuk waktu yang cukup lama ketika mereka melihat posting terkait dengan kepentingan mereka.

Artikel Terkait : Widget Related Posts Dengan Thumbnail 

Adapun Langkah - Langkahnya Sebagai Berikut :                                                          

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

Dashboard Blogger

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

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

</head>

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

Klik Untuk Melihat Code

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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/AVvXsEjo12sNw9XJyv1FudgHxErn_nqatzyPSFvJ0kWq0yt1BfEG6jV3dM0jXzrHOmmL2h315iAzgn8FnlvKerchW7a6rePcLW8IhwbUUnJLkg-ZCZkIcHLkHini-VBp2Q7QgcJeXoG5VV-LpPqd/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>
<!--Related Posts with thumbnails Scripts and Styles End-->

Catatan:                                                                           

- Untuk mengubah lebar dan tinggi thumbnail, memodifikasi nilai 110px dan 100px merah

- Untuk mengubah warna dan ukuran judul posting terkait, mengubah nilai warna biru

- Menghapus baris warna violet jika Anda ingin posting terkait yang akan ditampilkan  di homepage dan halaman posting.

Langkah 5. Cari baris bawah (Anda akan menemukan dua kali, tetapi Anda perlu berhenti di yang pertama):

<div class='post-footer'>

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

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
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>
<!-- Related Posts with Thumbnails Code End-->

Catatan:                                                               

- Mengubah nilai 5 dari max-results = 5 dengan jumlah posting yang ingin anda ditampilkan.

- Jika Anda ingin posting terkait yang akan ditampilkan pada homepage juga,  menghapus baris dalam violet

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

<b:includable id='postQuickEdit' var='post'>

Untuk info lebih lanjut, klik gambar di bawah ini:

Dashboard Blogger

Langkah 7. Simpan Template dan hanya itu. Sekarang Widget Related Posts akan muncul di bawah setiap posting blog yang memiliki label di atasnya.

Nikmati!