Memasang Artikel Terkait Bergambar di Blog

Ingin blog kita memiliki banyak page view sepertinya tidak mudah sebab banyak saingan saat ini. Blog yang kaya akan konten sangat berpeluang memiliki pengunjung setia yang mengunjungi halaman demi halaman blog kita. Mereka selalu menanti dan membuka tulisan kita yang menarik bagi mereka. Oleh karena itu sediakanlah pilihan artikel bagi mereka dengan menambahkan artikel terkait di akhir artikel. Cara ini dipandang efektif hingga sekarang. Ditambah lagi apabila ditampilkan gambar yang menarik, pasti memiliki peluang besar untuk diklik.

Apabila Anda tertarik memasang artikel terkait/ related post pada blog Anda, saya sediakan cara menambahkan artikel terkait bergambar pada blog seperti gambar berikut ini.

Langkahnya cukup mudah, silakan menuju template dalam mode HTML dan cari kode </head> kemudian letakkan kode berikut ini tepat di atas kode </head>

<!-- Terkait -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:center;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:100px;height:100px;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#333;text-align:left;text-transform:capitalize;padding: 0px 5px 10px;font-size:12px;width:100px; height: 50px;}
</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/AVvXsEgvCtLA4ez58qd0W4zy1-bUjiB_ZiUT8k-WQpKxrOQJdSkWRVzwd4E_4oV6Xjb7IlobT4aMFaPeBugdUG1FeDsxl6Y4aX82cjf60zggMnCaR8cWAg89QhEyU5WnjqMIMZMQt4snmWHIBB1B/s1600/goooooo.jpg'}if(relatedTitles[relatedTitlesNum].length>100)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,100)+"...";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<100&&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>
<!--Terkait End-->

Cari kode <data:post.body/> dan letakkan kode berikut ini di bawahnya

<h3>Related Post</h3>
<!-- Artikel Terkait 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=100&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style='font-size: 9px;float: right; margin: 5px;'><a href='bit.ly/2a2fCxn' rel='nofollow' style='font-size: 9px; text-decoration: none;'>Get Related Posts Widget</a></div>
</b:if>

<!-- Terkait End-->

Simpan template dan lihat hasilnya.

Tweet