Tooltip Related Post

Malam All
Postingan kali ini [OBC] akan membahas tentang modifikasi related post / artikel terkait . Artekel terkait memiliki peranan penting untuk blog itu sendiri , karena akan memudahkan pengunjung untuk menemukan artikel yang mungkin mereka anggap menarik. Style dari related post kali ini gambar kecil horizontal yang memiliki efect tooltip. 

Cari kode ]]></b:skin> masukan kode dibawah ini tepat diatas kode ]]></b:skin> 

/* MBL Thumbnail Related Posts With ToolTips --- */
.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-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: 98px;
 height: 98px;
 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: #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;}

Masih pada edit HTML dan sekarang sobat cari kode 

<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>

Setelah menemukan kode diatas sobat masukan kode dibawah ini tepat dibawah kode ( </div> ) diatas

<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]='http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png'};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'/>

Save dan lihat hasilnya

NB : maxresults=6 adalah jumlah artikel terkait yang ditampilkan , sobat bisa mengganti jumlahnya untuk disesuaikan

10 komentar

Trimakasih dah berbagi kak

terimakasih sobat sudah berbagi ilmu...related post memang bisa jadi penghias blog yang bermanfaat bagi pengunjung...salam :-)

postingan yg bermanfaat sobat
terima kasih banyak sudah berbagi pengetahuan

Makasih dah share Sob...

Terima kasih sharenya Mas Rully..
Tutorial yang sangat bermanfaat,..Happy Blogging!

terimaksih kembali sudah berkunjung

benar mas .. tanpa relatod post terasa kurang gimana gitu hehe
salam kebali mas

terimaksih kembali mas

maksih kembali sob

terimakasih kembali mas boku
happy bloging to