Related Post Tooltip Gaya Metro Style

Menerapkan gaya template blog metro windows ke dalam template blog rasanya tidak akan ada habis - habisnya untuk dibahas. Seiring berkembangnya trend didunia blogging makin banyak pula ide - ide yang mereka kembangkan dengan sedikit meniru gaya Metro UI/ metro style mulai dari widget unik, template dan sebagainya. Dan untuk kali ini saya akan berbagi tips blog membuat related post efek tooltip dengan model metro style. Untuk tampilanya anda bisa melihat pada blog ini.

Untuk langkah - langkah pemasangan di blog adalah sebagai berikut :

Masuk ke Edit Template dan masukkan kode CSS di bawah ini sebelum kode [[</b:skin> 

.related-post .post-thumbnail {
 z-index: 1;
 position: relative;
 width: 98px;
 height: 98px;
 margin: 0;
 display: block;
 border-right: 1px solid #fff;
 border-bottom: 1px solid #fff;
 -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: 98px;
 height: 98px;
 margin: 0 10px 10px 0;
 background: #F6F6F6;
 }
.related-post .related-post-title {
 display: none;
 float: left;
 background: #000;
 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;
}
.related-post:hover .related-post-title {display: block;}

Kemudian masukkan kode dibawah ini sebelum kode <div class='post-footer'> atau <data:post.body/>

<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/AVvXsEjtDIkRZ8IrU27rbbua90G7OrgM5rsEndwDkfy4m5LjKU-zcfhFk04j6V7GwxDr_dk4CZbX9e__eokSevseb0tfhl3GRNyZ_qvNfmiXCNfKKg9PF8HPrjEkIo8dSLowd3MVHnTB2xHIQ6sP/'};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=6;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</b:if>
</div>
<div class='clear'/>

Terakhir Save template dan lihat hasilnya.