Cara Membuat Related Post with thumbnail

Lihat Gambar di atas...!!!
Gambar tersebut adalah contoh dari related post yang memakai thumbail.
Jika blog memakai related post bisa memudahkan pengunjung untuk melihat artikel-artikel terkait yang mereka cari. Cara membuat related post tidak sulit. Ikuti saja langkah-langkah di Bawah ini .

1. Login ke blogger
2. Pilih template
3. Edit HTML
4. Cari kode  kode ]]></b:skin> Jika sudah ketemu copy kode dibawah dan pastekan tepat di atas kode tersebut
/* Related Post Dengan Tooltips Membuat Blog Keren --- */ .related-post .post-thumbnail { z-index: 1; position: relative; width: 100px; height: 100px; 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;}
5. Lanjut cari kode <div class='post-footer-line post-footer-line-2'/>, jika sudah ditemukan copy tag dibawah ini dan letakan tepat dibawah kode  <div class='post-footer-line post-footer-line-2'/>
<div id='related-posts'> <b:if cond='data:blog.pageType == "item"'> <script type='text/javascript'>//<![CDATA[ var ry='<h3> Related Posts</h3> ';rn='<h3>    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/AVvXsEhRGH05FkZILnf5vB9wif6G3iquDh7Vpl_jlNNbme2lQ7yfffN3ZGG7HM3-c2SQm3rC12Dy3PNbssa-uq1BWxTvxQ93-oWxWnOb2sZL9w25lbRy9kNZWCAIkgx1oCHMH08u0h2kVOtucqiW/'};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='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"' type='text/javascript'/> </b:loop> <script type='text/javascript'>var maxresults=5;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script> </b:if> </div> <div class='clear'/>
6. Langkah terakhir Simpan dan selesai