Cara Membuat Artikel Terkait / Related Post di Blogger

Artikel Terkait Atau Related Post berfungsi sebagai penanda pencarian artikel yang terkait dengan artikel yang sedang kita baca.
Artikel Terkait biasanya muncul dibawah postingan artikel yang sedang kita baca.

Nah pada postingan kali ini saya akan membagikan Tips Cara Membuat Artikel Terkait di Blogger
Seperti contoh pada gambar dibawah ini :

Untuk membuat Realeted Articles Pertama :

Anda harus Login ke akun blogger anda
Kemudian Anda masuk pada Tab Template >> Edit HTML, Jangan lupa untuk BackUp terlebih dahulu.
Lalu cari kode </head> , agar lebih mudah dalam pencarian gunakan (CTRL + F) kemudian cari Kode </head> tersebut
Kemudian Copy dan Paste kan Kode dibawah ini di atas Kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* Related Post */
#related_posts{margin-top:15px}
#related_posts h4{color:#000;background:#f0f0f0;padding:10px;margin:0 0 5px;font-size:120%;}
#related_img{margin:0;padding:0;}
#related_img:hover{background:0}
#related_img ul{list-style-type:none;margin:0;padding:0}
#related_img li{min-height:62px;border-bottom:1px solid #f1f1f1;list-style:none;margin:0 0 5px;padding:5px;}
#related_img li a{color:#2672a0;}
#related_img li a:hover{text-decoration:underline}
#related_img .news-title{display:block;font-weight:bold!important;margin-bottom:5px;font-size:14px;}
#related_img .news-text{display:block;text-align:justify;font-weight:normal;text-transform:none;color:#333;font-size:12px;}
#related_img img{float:left;margin-right:7px;border:1px solid #ccc;padding:2px;width:60px;height:60px;max-width:100%;background:#fff}
</style>
<script type='text/javascript'>/*<![CDATA[*/var relnum=0;var relmaxposts=5;var numchars=135;var morelink=" ";function saringtags(r,l){for(var e=r.split("<"),n=0;n<e.length;n++)-1!=e[n].indexOf(">")&&(e[n]=e[n].substring(e[n].indexOf(">")+1,e[n].length));return e=e.join(""),e=e.substring(0,l-1)}function relpostimgthum(r){for(var l=0;l<r.feed.entry.length;l++){var e=r.feed.entry[l];reljudul[relnum]=e.title.$t,postcontent="","content"in e?postcontent=e.content.$t:"summary"in e&&(postcontent=e.summary.$t),relcuplikan[relnum]=saringtags(postcontent,numchars),postimg="media$thumbnail"in e?e.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKz9-wWmEB8X8Vs4rs6kI6N7eNvQwpW6oT8mwS57IY-7YQHFwb_1edAwASqRyrBtU0q48A1S90uvkNWHKsuTVy0VX3tawC0qU1kPl8MCmbqtG-9cmzu_-mty6Hv1YAQRvnfzb5D2ZE4WPg/d/noimagethumb.gif",relgambar[relnum]=postimg;for(var n=0;n<e.link.length;n++)if("alternate"==e.link[n].rel){relurls[relnum]=e.link[n].href;break}relnum++}}function contains(r,l){for(var e=0;e<r.length;e++)if(r[e]==l)return!0;return!1}function relatpost(){for(var r=new Array(0),l=new Array(0),e=new Array(0),n=new Array(0),t=0;t<relurls.length;t++)contains(r,relurls[t])||(r.length+=1,r[r.length-1]=relurls[t],l.length+=1,l[l.length-1]=reljudul[t],e.length+=1,e[e.length-1]=relcuplikan[t],n.length+=1,n[n.length-1]=relgambar[t]);reljudul=l,relurls=r,relcuplikan=e,relgambar=n;for(var t=0;t<reljudul.length;t++){var a=Math.floor((reljudul.length-1)*Math.random()),u=reljudul[t],s=relurls[t],i=relcuplikan[t],o=relgambar[t];reljudul[t]=reljudul[a],relurls[t]=relurls[a],relcuplikan[t]=relcuplikan[a],relgambar[t]=relgambar[a],reljudul[a]=u,relurls[a]=s,relcuplikan[a]=i,relgambar[a]=o}for(var g,m=0,h=Math.floor((reljudul.length-1)*Math.random()),c=h,d=document.URL;m<relmaxposts&&(relurls[h]==d||(g="<li class='news-title clearfix'>",g+="<a href='"+relurls[h]+"' rel='nofollow' target='_top' title='"+reljudul[h]+"'><img src='"+relgambar[h]+"' /></a>",g+="<a href='"+relurls[h]+"' target='_top'>"+reljudul[h]+"</a>",g+="<span class='news-text'>"+relcuplikan[h]+" ... <a href='"+relurls[h]+"' target='_top'>"+morelink+"</a><span class='news-text'>",g+="</li>",document.write(g),m++,m!=relmaxposts))&&(h<reljudul.length-1?h++:h=0,h!=c););}var reljudul=new Array,relurls=new Array,relcuplikan=new Array,relgambar=new Array;/*]]>*/</script>
</b:if>

Berikut tampilan pemasangan kode di template bandungcoder

Setelah anda copy dan paste kan kode di atas, kemudian anda cari kode berikut </b:includable id='post' var='post'> setelah anda menemukan kode tersebut arahkan kursor kebawah sampai anda menemukan tag penutup kode berikut </b:includable> kemudian copy lalu pastekan kode dibawah ini tepat di atas kode </b:includable> berikut kode nya :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='clear:both;'/>
      <div id='related_posts'>
        <h4>Related Articles :</h4>
        <b:loop values='data:post.labels' var='label'>
          <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/>
        </b:loop>
        <ul id='related_img'>
          <script type='text/javascript'>relatpost();</script>
        </ul>
      </div>
      </b:if>

Berikut tamplian pemasangan kode di template bandungcoder

Setelah anda paste kan kode tersebut kemudian simpan dan lihat blog anda, bagaiamana mudahkan Cara Membuat Artikel Terkait / Related Post di Blogger