Widget Thumbnail Related Post for blogger with Tooltips

Creating Widget Thumbnail Related Post for blogger with Tooltips is another awesome and must have widget for blogger templates, and that is Related Posts Widget With Thumnail and hover Tooltip

How to add Related Post to blogger :

Please make a backup of your template before proceeding.
Step 1: Go to Blogger Dashboard>Template>Select 'Expand Widget'

Step 2: Now Search for ]]></b:skin> and add this code above it

.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;}

 

Step:3 Now search for these lines in your template.

 

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

 

Once you find similar code in your template, paste this code below it.

 

<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/AVvXsEhqtVavYjdsj9dTxn-VYU7TxHkI6HUSt-KxZadMNTsTWMsdoozW4B9uzn3WsMLbXuOE87EGkJfOTKTL_1mrrSfYo8BKvpVN_uXv_87O41KdYtbIgLEdEYz4zXC-I5aIX6G-AaAGgUotKfK9/'};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'/>

 

That's All! Now save your template and preview it.

-You can change the number of posts display,Search for maxresults=6 and replace “6” with your desired number of related articles.
-To change the Widget and height of the thumbnails replace the four 98px with your desired numbers.

Anda baru saja membaca artikel yang berkategori Blogger EN / WIDGET dengan judul Widget Thumbnail Related Post for blogger with Tooltips . Anda bisa bookmark halaman ini dengan URL https://sisatruk.blogspot.com/2013/01/widget-thumbnail-related-post-for.html .

Artikel Terkait Blogger EN , WIDGET

Ditulis oleh: Pramudya Ksatria Budiman - Rating : 4.5