Cara Membuat Artikel Terkait/Related Post Keren Di Blogger

Artikel terkait merupakan widget yang penting. Terutama untuk menurunkan bounce rate/rasio pentalan blog anda. Rasio pentalan ini menunjukkan seberapa betahkah pengunjung berada di blog anda,dengan memberikan artikel lain yang sesuai maka bisa meningkatkan lamanya pengunjung di blog kita sehingga menurunkan rasio pentalan situs kita. Maka dari itulah widget related post ini harus dipasang.

Selain itu bisa meningkatkan page views blog kita. Mungkin kalian pernah melihat related post dari google. Biasanya ada logo seperti iklan adsense dipojok kanan atas. Itu namanya matched content. Seperti halnya related post yang berfungsi untuk meningkatkan page views dan menurunkan bounce rate,matched content ini bisa meningkatkan penghasilan dengan adanya iklan didalamnya. Tapi kita tidak akan membahas lebih dalam tentang matched content.

Related post ini bisa anda letakkan dimana saja. Di sidebar/footer tapi idealnya lebih bagusnya kita pasang di bawah postingan artikel kita. Ketika pengunjung selesai membaca artikel maka bisa melihat widget artikel terkait dan bisa membaca artikel yang lain. Bagaimana cara membuatnya? Berikut langkah-langkahnya

Cara Memasang Related Post

Langkah 1

Silakan masuk ke blogger,pilih Template → Edit HTML. Salin kode css dibawah ini dan letakkan diatas kode ]]></b:skin> atau </style>

/* Arlina Related Post */
#related_posts{margin-top:20px}
#related_posts h4{color:#fff;background:#3498db;padding:10px;margin:0 0 5px;font-size:110%;}
#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;font-weight:normal;text-transform:none;color:#888;font-size:11px;}
#related_img img{float:left;margin-right:10px;width:60px;height:60px;max-width:100%;background:#fff}

Langkah 2
Salin kode dibawah ini dan pastekan/letakkan diatas kode </head>

<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/AVvXsEgfBFhMv7Tm3xcf02_wQihWtRlSeVjySy-9ce2Tjn-VwkAPUgr2WJVLi5b4108-2alMyftBPWNl7nwmypw6w2iBGJJ9IzyGO65NBWDPFOm5yz9SIYTd0mjN1VaKnMjuOPcwV9qHyfUuQ8IL/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>

Langkah 3
Salin kode berikut dan letakkan dibawah kode <data:post.body/>

<div id='related_posts'>
<h4>Artikel Terkait</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>

Karena kode <data:post.body/> ada lebih dari satu ditemplate maka silakan anda cocokan/coba satu per satu.

Lalu simpan template.

Sekarang coba buka blog sobat dan lihat apakah artikel terkaitnya udah muncul atau belum dibawah postingan. Cukup sekian artikel yang bisa saya bagikan. Semoga bisa membantu dan bermanfaat.