Membuat Related Post Bergambar Dibawah Postingan Di Blogku

Membuat related post bergambar dibawah Postingan di blogku ini, saya hanya menambahkan beberapa script/code ke dalam template blog yang saya pakai.

Silakan saja ikuti langkah-langkahnya di bawah ini :

1. Pastikan sudah login ke blogger Anda dan pilih menu Template

2. Kemudian pilih menu Edit HTML, 

3. Setelah itu carilah kata </head> di dalam kode template blog Anda, untuk memudahkan klik Ctrl + F pada keyboard untuk memudahkan pecarian.

4. Jika sudah ketemu, silakan copy kan kode pada kotak dibawah ini TEPAT DIATAS kata </head> tadi. berikut adalah kode nya :

<!--Related Posts with thumbnails 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/AVvXsEidQnc3SmOnMrMej9kKYpJyVBxXYZnM7twnoxqXSNyq5AKAYIonEnASVPwbAWTWNVJ4sOfGBnAZ2pdvOq32RmAI_Mv6cinOBmeNOmzoqeZp-2evyrThDolWLR-jliCxNKSmROxTsja-UyQv/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 End-->

5. Setelah itu cari kata <b:if cond='data:post.hasJumpLink'> dengan cara yang sama menggunakan Ctrl + F. Biasanya kata itu ada dua, maka pilih saja yang terakhir, atau coba saja satu satu. Setelah itu copy kan kode di dalam kotak di bawah ini TEPAT SETELAH kode tersebut. berikut kode nya :

<!-- 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 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_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Artikel Terkait :</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>

<!-- Related Posts with Thumbnails Code End-->

6. Setelah semua selesai klik SAVE atau Simpan dan lihat hasilnya.

Angka 5 dapat di ubah sesuai keinginan Anda, untuk menampilkan jumlah artikel terkait yang muncul kata ARTIKEL TERKAIT juga dapat diganti sesuai keinginan.

Demikianlah cara membuat menu Related post di bawah postingan, jika bermasalah silakan hubungi Admin, atau langsung koment di bawah postingan ini. 

Semoga bermanfaat.