Tooltips Related Post Widget For Blogger With Thumbnail

Adding a Related post widget to a weblog has ever proved to endure extremely beneficial for those bloggers who consistently acquire higher Bounce rate. Related posts are ever accessible at the destination of the post, hence the visitors won’t experience whatsoever interruption spell reading the article. Moreover, afterward reading out the article users tin experience complimentary to view unopen to related posts. It reduces the Bounce rate pretty handsomely as well as plays a pregnant role inwards engaging visitors. However, Blogger doesn’t bring built-in related post functionality. Therefore, nosotros bring to depend on external sources. After releasing the Professional threaded commenting system, today nosotros volition give away our Thumbnail Related post organisation alongside Tooltips for Blogger Enabled platform.

Why To Use Related Post Widget?

Related post articles helps visitors to larn things inwards depth. For Example, a user landed on an article though search engine spell reading the whole article he saw a List of “Related Post” out of which he conduct i to read as well as this procedure volition hold on proceed until he gets bored. On i hand, it increases the solar daytime of the month of users. While on the other hand, it reduces the bounce rate. So, a somebody gets dual wages past times doing slight changes.

How The Related Post Widget Looks?

The Widget is non similar others because it has unopen to professional person as well as well-crafted functionality. It has a Tooltip functionality that volition display the Post championship when someone volition hover over the Related Post Thumbnails. We bring attached a Screenshot below hence anyone tin easily sympathize how well-crafted this widget is. 

How To Install MBL Thumbnail Related Post Widget alongside ToolTips

This weblog has over 9000+ Bloggers who belongs to dissimilar platforms. Therefore, nosotros ever tried to arts and crafts our tutorial inwards such a means that every somebody tin sympathize either he belong to Technical, or nontechnical departments. To install this Widget follow the next steps correctly.

  • Go to Blogger >> Template.
  • Press Edit HTML >> Proceed.
  • Select (Tick) the “Expand the Widget” Box.
  • Search for ]]></b:skin> and inwards a higher house it glue the next CSS3 Coding.

/* 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 corporation #fff;
border-bottom: 1px corporation #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;}


  • Now Once in i lawsuit to a greater extent than inside your template, search for Following Coding.

<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 lot uncovering a similar coding, only below it glue the next coding.

<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’ inwards 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’ inwards 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=”Adding a Related post widget to a weblog has ever proved to endure extremely beneficial for th Tooltips Related Post Widget For Blogger With Thumbnail” 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’/>

Customization:
  • To increment the issue of related articles Search for maxresults=6 as well as supervene upon “6” alongside your desired issue of related articles that you lot wish to see.
  • To alter the Widget as well as pinnacle of the thumbnails supervene upon the 4 98px alongside your desired numbers.
All Done: That’s all hitting the “Save template” button. Now view your weblog as well as experience the difference. Try to Hover over the Related Thumbnail as well as relish the uniqueness. 

From The Editor’s Desk:
This was our minute personalize widget that nosotros bring shared to our whole readers. One of our loyal readers requested to percentage our custom related post widget, as well as nosotros were unable to reject his request, because without making your readers Happy you lot can’t run a blog. If you lot facial expression upwardly whatsoever difficulty experience complimentary to ask. Take a lot tending of your dearest ones till as well as then peace, blessings as well as happy blogging.


Sumber http://www.mybloggerlab.com