Cara Membuat Related Post Keren Disertai Gambar Dan Tooltips

Cara Membuat Related Post Keren Disertai Gambar Dan Tooltips
Membaca judul postingan di atas kamu pasti akan langsung tertarik. Iya memang pada kesempatan kali ini aku akan membagikan tutorial untuk membuat related post atau yang sering juga disebut dengan artikel terkait yang keren.

Kenapa kok bisa keren? Karena related post yang satu ini tampil dengan hanya gambar postingan dengan disertai tooltips. Penasaran bagaimana jadinya nanti jika sudah selesai untuk membuatnya? Kalau mau ngintip jadinya nanti seperti apa silahkan lihat gambar di bawah ini :

Dengan menambahkan artikel terkait pada blog, kita bisa mengurangi tingkat bounce rate di blog kita. Dan tentunya membuat pengunjung di blog kita betah untuk membaca artikel-artikel kita yang lainnya. Biar artikel yang sudah kita buat susah-susah di blog kita ada yang baca.

Cara Membuat Related Post Keren Langkah 

1 : Masuk ke akun Blogger >> Dashboard

Langkah 2 : Pilih Template >> Edit HTML ( Centang Expand Widget Template )

Langkah 3 : Cari kode di bawah ini (Gunakan CTRL + F untuk mempermudah):

]]></b:skin>

Jika sudah ketemu kode di atas, kemudian masukkan kode CSS di bawah ini tepat di atas kode ]]></b:skin>

/* Related Post Dengan Tooltips Membuat Blog Keren --- */
.related-post .post-thumbnail {
z-index: 1; position: relative;
width: 108px;
height: 108px;
margin: 0; display: block;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 2px 2px 5px #444;
-moz-box-shadow: inset 2px 2px 5px #444;
box-shadow: inset 2px 2px 5px #555;
}
.related-post {
float: left; position: relative;
width: 108px;
height: 108px;
margin: 0 10px 10px 0;
background: #F6F6F6;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.related-post .related-post-title {
display: none;float: left; background: #00B366;
color: #fff;
text-shadow: none;
font-weight: bold;
padding: 10px;
position: absolute;
top: -20px;
left: 40px;
z-index: 2;
width: 200px;
-webkit-box-shadow: 0 0 2px #444;
-moz-box-shadow: 0 0 2px #444;
box-shadow: 0 0 2px #444;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.related-post:hover .related-post-title {display: block;}

Langkah 4 : Carilah kode yang kira kira seperti yang ada di bawah ini :

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'/>
<div class='post-footer-line post-footer-line-2'/>
<div class='post-footer-line post-footer-line-3'/>
</div>
</div

Langkah 5 : Kemudian kalau sudah ketemu kode seperti di atas masukkan kode HTML di bawah ini di bawah <div class='post-footer-line post-footer-line-1'/> atau di bawah <div class='post-footer-line post-footer-line-2'/>.

<div id='related-posts'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>//<![CDATA[
var ry='<h3>Related Posts</h3>';rn='<h3>&nbsp;&nbsp;&nbsp;No related post available</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbx57YXIHU96G85gVOxf1ciwxsx23iojOX1byxYSXp7aqGRIo7elftG9J7ueVhGo4u3RySqfPjRAPl0OS4XtzasTyNX9ItQlrK7FoeAlEQOAv6DYABTtydZeZog07cjplJBR1mv7W_o23M/'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><div class="related-post-title">'+titles[c]+'</div><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]></script>
<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=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=5;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</b:if>
</div>
<div class='clear'/>

Untuk mengeditnya baca keterangan di bawah ini :

• Untuk menampilkan jumlah artikel yang terkait, kita cukup untuk mengganti angka 5 pada maxresults=5 dengan jumlah yang kita inginkan.
• Untuk mengganti tinggi dan lebar dari gambar yang muncul cukup ganti 108px dengan lebar atau tinggi yang kita inginkan
• *agar tidak gagal, saya meletakan kode html No.5 di atas kode <div class='post-footer'>

Nah, itu saja sudah selesai. Sekarang silahkan klik "Save Template" kemudian lihat hasilnya. Bagaimana sobat? Apa kamu ada kesulitan?