Cara Membuat Related Post Dengan Gambar

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 .

Login ke blogger
Pilih template
Edit HTML
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;}

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/AVvXsEgED5_fp5gMmJydUQmuuL2Jjo4Jd5C7sAaZe6oVL8pdw9-qZ7goIVSskJkQU0_zbiwh8YH4g5buoLPwAL8L9cjn2QReitK7gG80MboxRUdRCAmAT2wqNFZbKeB5nqKDBV6Gr_iOWI0VcEd5/'};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'/>

Langkah terakhir Simpan dan selesai

ARTEK TRIK

Pages

Cara Membuat Related Post Dengan Gambar