Tooltips Related Post Widget For Blogger With Thumbnail

Adding a Related post widget to a blog has always proved to be extremely beneficial for those bloggers who consistently get higher Bounce rate. Related posts are always accessible at the end of the post, so the visitors won’t feel any interruption while reading the article. Moreover, after reading out the article users can feel free to visit some related posts. It reduces the Bounce rate pretty handsomely and plays a significant role in engaging visitors. However, Blogger doesn’t have built-in related post functionality. Therefore, we have to depend on external sources. After releasing the Professional threaded commenting system, today we will reveal our Thumbnail Related post system with Tooltips for Blogger Enabled platform.

Tooltips Related Post Widget (DEMO)

Why To Use Related Post Widget?

Related post articles helps visitors to learn things in depth. For Example, a user landed on an article though search engine while reading the whole article he saw a List of “Related Post” out of which he select one to read and this process will keep on continue until he gets bored. On one hand, it increases the engagement of users. While on the other hand, it reduces the bounce rate. So, a person gets dual advantage by doing slight changes.

How The Related Post Widget Looks?

The Widget is not like others because it has some professional and well-crafted functionality. It has a Tooltip functionality that will display the Post title when someone will hover over the Related Post Thumbnails. We have attached a Screenshot below so anyone can easily understand how well-crafted this widget is. 

How To Install MBL Thumbnail Related Post Widget with ToolTips

This blog has over 9000+ Bloggers who belongs to different platforms. Therefore, we always tried to craft our tutorial in such a way that every person can understand either he belong to Technical, or nontechnical departments. To install this Widget follow the following steps correctly.

• Go to Blogger >> Template.
• Press Edit HTML >> Proceed.
• Select (Tick) the “Expand the Widget” Box.
• Search for ]]></b:skin> and above it paste the following 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 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;}

• Now Once again within 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 find a similar coding, just below it paste the following 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' 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/AVvXsEhgwX1wZE22Ndzp_lJd6HS1zYBuEoZ8pwtZ0i4yXDx7hY_wLRtZS_d0cyTTqbkGGYbK2WjVIcNL5f62MOaHcINCBdz9C08WmRJVlrtaYg2VRq0tLL8-VEa8gzwTujNwi1WfXD2zQk7jCxeq/'};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'/>

Customization:

• To increase the number of related articles Search for maxresults=6 and replace “6” with your desired number of related articles that you want to see.
• To change the Widget and height of the thumbnails replace the four 98px with your desired numbers.

All Done: That’s all hit the “Save template” button. Now visit your blog and feel the difference. Try to Hover over the Related Thumbnail and enjoy the uniqueness. 

From The Editor’s Desk:

This was our second personalize widget that we have shared to our whole readers. One of our loyal readers requested to share our custom related post widget, and we were unable to decline his request, because without making your readers Happy you can’t run a blog. If you face any difficulty feel free to ask. Take a lot care of your love ones till then peace, blessings and happy blogging.

SHARES

Share

Pin it

Tweet

Share

Share

Share

Buffer

Print

Tooltips Related Post Widget For Blogger With Thumbnail

4/ 5

By Editorial Board

Posted By Editorial Team On October 21, 2012 Comment