Cara Membuat Gadget Postingan Terkait / Related Post di Blogger

Ini adalah gadget yang indah untuk menampilkan Postingan Terkait / Related Post di footer dari setiap postingan blog dengan kategori/label yang sama, bersama dengan menampilkan tampilan thumbnail/gambar. Dengan memasang gadget ini di blog, tidak hanya membantu untuk menampilkan posting yang relevan, tetapi juga dapat meningkatkan tampilan halaman blog akibat pengunjung penasaran dengan gambar yang ditampilkan. Ini trik yang jitu agar pembaca betah melihat isi blog anda untuk waktu yang relatif lebih lama.

Sayangnya template blogger standar tidak memiliki fitur ini. Jadi, jika anda menggunakan template blogger standar atau template yang tidak memiliki gadget pos terkait tapi ingin menyertakan fitur ini di blog anda, silakan ikuti langkah-langkahnya sesuai urutan.

Cara menambahkan gadget Related Post dengan Thumbnail / Gambar Mini di Blogger

Untuk membuat gadget ini anda memerlukan pengetahuan tentang bahasa coding (JavaScript dan CSS). Namun jangan khawatir, di postingan ini anda tidak perlu membuat kode sendiri tetapi hanya mengikuti langkah-langkah dan menyalin kode untuk menambahkan fitur penting ini ke dalam blog anda.

1. Masuk ke akun Blogger Anda.

2. Pilh menu Template.

3. Download / Back up template Anda sebelumnya, untuk berjaga-jaga jika anda membuat kesalahan dalam pengeditan template.

4. Klik tab Edit HTML dan cari </head>.

5. Sekarang Salin kode dan paste tepat di atas tag </head>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{padding:20px 0;display:inline-block;width:100%}#related-posts h2{margin-top:10px;background:0 0;padding:0}#related-posts .related_img{width:105px;height:105px;object-fit:cover}#related-title{color:#222;line-height:16px;padding:0;text-align:center;text-shadow:0 2px 2px #fff;width:100px}#related-posts .related_img:hover{opacity:.7;-moz-opacity:.7;-khtml-opacity:.7}#related-title:hover{text-decoration:underline}
</style>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVgwiIpsuxyAQ8pjqhTSShzT1IaecQ6iGhBJEUrWrfA0axRJkKGaXwYYFM4xEy4_Zc5VCvqiddv9tKJ2tm8eEEEL6dRiGrmDVK8b3LIz86d43oX3YQkUt62N-qcaSZuEvxbJH7iLLEUdcF/s1600/no-thumbnail.png";showRandomImg=true;aBold=true;summaryPost=400;summaryTitle=20;numposts1=12;numposts2=4;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}
  function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts2<=json.feed.entry.length){maxpost=numposts2}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;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!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';var trtd='<div class="col_masandisyam"><h2 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="related_img" src="'+img[i]+'"/></a><div class="clear"></div></div>';document.write(trtd);j++}}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/AVvXsEgVgwiIpsuxyAQ8pjqhTSShzT1IaecQ6iGhBJEUrWrfA0axRJkKGaXwYYFM4xEy4_Zc5VCvqiddv9tKJ2tm8eEEEL6dRiGrmDVK8b3LIz86d43oX3YQkUt62N-qcaSZuEvxbJH7iLLEUdcF/s1600/no-thumbnail.png'}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('<h2>'+relatedpoststitle+'</h2>');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>

6. Setelah menambahkan kode diatas, kemudian gulir ke bawah dan cari <div class='post-footer'>. Salin dan Paste CSS di bawah ini tepat di atas <div class='post-footer'>.

<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>
        <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>Postingan Terkait</b>&quot;;
            removeRelatedDuplicates_thumbs();
            printRelatedLabels_thumbs();
        </script>
    </div>
</b:if>

Keterangan :
maxresults=5 ; untuk mengubah jumlah postingan terkait.
Postingan Terkait; untuk mengubah judul gadget ini.

7. Simpan template dan silakan cek hasilnya.

Baca juga:

• Cara Membuat Gadget Postingan Terbaru / Recent Post di Blogger

Mudah-mudahan, cara ini akan bekerja di blog anda. Semoga bermanfaat!