Related Post With Thumbnail Plus Efek Hover

Dulu pada pembahasan SEO yang paling pertama, kalau tidak salah postingan kedua membahas tentang Related Post Tanpa Thumbnail dan kali ini akan membahas lagi tentang penerapan Related Post, dalam segi visitor related post sangat berperan penting, karena dengan melihat gambar ataupun artikel lain yang menarik maka visitor akan terus membaca artikel kita, jika visitor selesai membaca dan melihat artikel berkaitan lainnya yang lebih menarik maka visitor akan membaca lagi dan begitu seterusnya sampai visitor matanya merah, untuk lebih jelasnya lihat gambar dibawah ini.

 

Related Post With Hover

Langkah 1

• Login ke Blogger
• Masuk ke "Rancangan - Edit HTML"
• Cheklist "Expand Template Widget"

Langkah 2

• Gunakan ctrl-f dan letakan kode CSS dibawah ini sebelum kode:  ]]><b:skin>

/* Related Post Widget */

#related-posts{
float:left;
height:160px;
margin-bottom:10px;
outline: 1px solid #fff;
border: 1px solid #ddd;
background: #f9fafb;
}

#related-posts h3{
    font-family: Francois One;
    font-size:20px;
    font-weight:400;
    color: #222222;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    margin-left: 0.5em;;
    padding-top: 0em;
}

#related-posts ul{
margin:5px;
width:613px;
padding-left:17px;
list-style:none;
display:block;
}
#related-posts ul li{
list-style:none;
position:relative;
float:left;
border:0 none;
margin-right:11px;
padding:2px;
width:86px;
}


#related-posts ul li:hover{z-index:100}
#related-posts ul li:hover img{border:3px solid #BBB}


#related-posts ul li:hover div{
font-size:7px;
text-transform:capitalize;
position:absolute;
top:20px;
left:-15px;
margin-left:0;
width:130px
}
#related-posts ul li img{
border:3px solid #DDD;
width:80px;
height:80px;
background:#FFF;
display:block;
}
#related-posts ul li div{
position:absolute;
z-index:99;
margin-left:-999em
}
#related-posts ul li .title{
text-align:center;
border:1px dotted #CCC;
background:#fff;
padding:5px 10px
}

Langkah 2

• Kemudian cari kode: <data:post.body/> dan letakkan kode dibawah ini diatasnya

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<script type='text/javascript'>var ry=&#39;<h3>Other Tutorials For You To See:</h3>&#39;;rn=&#39;<h3>No Related Posts </h3>&#39;;rcomment=&#39;Comment&#39;;rdisable=&#39;Comments off&#39;;commentYN=&#39;yes&#39;;</script>
<script type='text/javascript'>
//<![CDATA[
var nothumb='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png';dw='';titles=new Array();titlesNum=0;urls=new Array();time=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;time[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]=nothumb};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]=time[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;time=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){for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.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+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+thumb[c]+'"/></a><div class="title"><a href="'+urls[c]+'" rel="nofollow"><h2>'+titles[c]+'</h2></a><span>'+time[c].substring(8,10)+'/'+time[c].substring(5,7)+'/'+time[c].substring(0,4)+comments[c]+'</span></div></li>';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=6;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</div>
<div style='clear both'/>
</b:if>

Selanjutnya simpan dan langsung saja lihat hasilnya.

Sekian dari saya semoga berhasil dan sukses