Tooltips Related Post Widget For Blogger With Thumbnail

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

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]='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'/>

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

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

61 comments

SR
October 21, 2012 at 12:34 PM


Woow Great Post Brother.

Thanks
techzain.com

October 21, 2012 at 5:55 PM

Thnx for accepting my request bro :D

October 21, 2012 at 6:21 PM

New type Of Related Widget

Thanks For Ur Efort.

Make optical illusion image Use MS Paint

October 21, 2012 at 7:08 PM

ITs a nice widget , but what happens when the post doesn't have a image in it ?
Get a QR Code Image for your Blog

October 21, 2012 at 7:16 PM

Very useful Widget bro, the widget is very useful to reduce bounce rate of blogs and keep our visitors busy.
Bro i think you have increase the size of thumbnails, because they are very small and also add the title of related posts below thumbnails. By doing this there are more chances to click on related posts. other things are very good.

Regards: Kulwinder Singh
The Tech Shell

October 21, 2012 at 10:48 PM

Hey SYED, I have tried this on my blog,
but it is not working.
can you please check the problem in my blog?

http://www.mytrickways.com

October 21, 2012 at 11:44 PM

The size can changed be changed by editing the lines
as shown in the code

width: 98px;
height: 98px;

And if you have more doubt then you can ask from Syed as he is a pro blogger and have a great commnd on coding.

October 22, 2012 at 12:10 AM

Syed nice going, I am now daily reader of your blog.I love the way you make your blog post attractive,In previous day I was great fan of MBT but now this blog attract me.

Keep Writing Good Post.

Editorial Team MOD
October 22, 2012 at 12:22 AM

Well, Those Articles who won't have any Thumbnails would not going to displayed in the Related Articles Portion. I Would recommend you to add images to your Articles because Image is the life of content. Peace

Editorial Team MOD
October 22, 2012 at 12:24 AM

Dude, I have checked your Blog I Think you haven't implemented the Coding. Or if you have, then you have removed it. Therefore, We are unable to detect what is the problem!

Please Define the The ERROR you are getting. Peace

Editorial Team MOD
October 22, 2012 at 12:25 AM

Thanks Aumkar, Those Comments are like a Piece of GOLD for us. We would surely keep on producing high quality widgets. Thanks for your kind words. Peace

Editorial Team MOD
October 22, 2012 at 12:26 AM

Sure Dude, You are one of our oldest readers. Peace

Editorial Team MOD
October 22, 2012 at 12:28 AM

Yap, IT might look Small therefore, we have defined the Widget and Height Dimensions so you and adjust it accordingly. Well actually we wanted to Create a TOOLTIP Widget rather than a ordinary one. So we didn't added the title beneath the Thumbnail. Hope that Helps. Peace

October 22, 2012 at 3:18 AM

syed faizain ali bro please tell the font names

October 22, 2012 at 7:31 AM

the widget is nice :) :) :D

MyPremiumTricks

October 22, 2012 at 7:36 AM

hey bro! i just want to know how some users creates links like abc.com/go/gplus and it redirects to their google plus profile. any guesses? like mbt?

Editorial Team MOD
October 22, 2012 at 8:17 AM

Yes Buddy, I have seen those Things Basically Those are use a Redirect to locate Their Google Plus Account. If you have Cpanel and have command over it then you can easily make that possible. Peace

Editorial Team MOD
October 22, 2012 at 8:18 AM

Sorry, Its our Custom Fonts. However, we can provide a bit similar one if you are interested.

October 22, 2012 at 10:12 AM

Yes syed i have removed the coding as it was not working.
what should i do now?

Editorial Team MOD
October 22, 2012 at 10:26 AM

IF you Have Followed the Steps Correctly it should Work.

You Can Send us your Theme in XML Format and we will do the rest.

Send your Theme in XML Format on our contact us page. Contact.mybloggerlab.com

Peace and Blessings

October 22, 2012 at 11:31 AM

:-) nice widget.I guess its already there in the freshable template?
Secondly, if you visit my blog; you will notice that it is not loading 'tech news' and the 'Comments' in the footer.I have removed google search bar for the same reason because it says 'Loading....' and never loads.
Any suggestions?

Editorial Team MOD
October 22, 2012 at 11:45 AM

Yes, This Related Post Widget is Already on Freshable Theme. Yap, I Saw that it keeps on "Loading" I Guess those widgets are not well-formed. IF you are using Blogger's Default widgets than it should work. Please Name the Widgets that you are using so we can test them on the same theme. Thanks :)

October 22, 2012 at 12:36 PM

For comments I am using the Feed and NewsReel for retrieving tech news.Kindly check it on theme.

Editorial Team MOD
October 22, 2012 at 12:47 PM

Wait for Few Days! Till We check them :)

October 23, 2012 at 2:52 AM

Thanks bro for your hint, btw i have sent you the code as you said. please check and i will be thankfull to you, you are really helpful guy. feeling proud to be your regular reader.

Editorial Team MOD
October 23, 2012 at 6:53 AM

Dude Don't Send me the Code, Send me the Complete template in XML Format.

October 23, 2012 at 8:27 AM

but there is no any option to upload anything,

Editorial Team MOD
October 23, 2012 at 10:58 AM

Dude, I have Replied to your Email. Send XML Template on it by attaching. Or Upload your Blog on Mediafire and send me the Link. Peace

October 24, 2012 at 3:17 AM

Wonderful syed. love the way you explained it through.Well done.

October 24, 2012 at 3:24 AM

I tried saving the template but it conntinues to load my new edit

Editorial Team MOD
October 24, 2012 at 3:27 AM

Its Your Internet connection Error. As Long as It didn't give any errors!

October 24, 2012 at 10:13 AM

How do i know my new edited template is saved.What page does it loads.Thanks.

Editorial Team MOD
October 24, 2012 at 12:26 PM

Once, Your Template is Saved It will Stop Displaying the "Loading" Gif.

October 25, 2012 at 12:00 AM

Awesome, Beautiful And useful Widget. thanks for Sharing Post :)


Regards
Rahul Kashyap
Blog: SDMMovies.com | Movies4u.us

October 25, 2012 at 6:49 AM

My templates has only these two lines of second step

I pasted the code below them but related posts are not appearing
InternetDreamz

Editorial Team MOD
October 25, 2012 at 7:28 AM

We have seen you are using a Social Bookmarking Widget, Try to Paste the Coding under it. Hope that helps.Peace

October 28, 2012 at 7:11 AM

Thanx :D

October 31, 2012 at 2:58 AM

wonderful brother..nice widget
Blogging Tips & Tricks

Editorial Team MOD
November 1, 2012 at 3:05 AM

@jasmine

We Don't allow Links in Profile Name therefore your comment is caught up in Spam. However, we have checked your blog simple search for <div class='entry-bottom'></div> in your Template and below it paste the Related post widget. Code Hope that Helps. Peace

November 1, 2012 at 4:19 AM

Oops! i am sorry for that.
and thank u so much for replying, i added the code and its working like charm.
thank u so much.
subscribed!

November 5, 2012 at 3:31 AM

I implement your code on my blog.It was really nice,but what about the posts which don;t have any image.it looks very awful,when in related post shows no image available.Kindly provide solution for this

Thank You
techkiddy

November 10, 2012 at 1:01 AM

Can we make image thumbnail /s100-c/ instead of /72-c/?

November 20, 2012 at 10:23 PM

Bro very Awesome Widget but there is a problem here It is not showing in my blog is there any problem with my blog
Blog : Haseeb net
please Help me

November 25, 2012 at 10:21 AM

Hi Syed

I am not getting these codes in My blog templet can you please help
my blog is
www.guidemumbai.com

Editorial Team MOD
November 25, 2012 at 12:41 PM

Paste the Related Post Script Just Next to your Home, Newer and Older Post Buttons. Hope that Helps Peace.

December 4, 2012 at 12:56 AM

Hey Syed.
Second Block Coding cannot find in my blog
help

Editorial Team MOD
December 4, 2012 at 1:03 AM

Can you Please Provide a Link to your Blog or your Template in XML Format so we can help you more. Peace

December 18, 2012 at 7:51 AM

can i add this widget after comment box of post?

December 24, 2012 at 4:05 PM

Hello Bro,
I would like to implement the same in a wordpress blog. Can you please help me?

Editorial Team MOD
December 24, 2012 at 11:58 PM

Sorry, We don't Support WordPress

January 4, 2013 at 4:48 AM

Hello Syed,
Just one question how to change the position of the Thumbnails and Related Posts widget heading ? they all are sticking on left side I want them to be in center.

January 28, 2013 at 11:50 AM

thanks for sharing this nice information i am very happy to read full topic about relatedt post. i think it is very useful for me.
http://sms7up.com/

January 29, 2013 at 1:41 AM

Salam Syed bro, it's not working for me, i have tried many others too, but couldn't do it, Please Help.. http://itech-hubz.blogspot.com/

Editorial Team MOD
January 29, 2013 at 6:18 AM

There must be some problem with your Theme

January 29, 2013 at 8:11 AM

so what should i do

May 13, 2013 at 8:07 AM

brother wadgets not inserted to applying this method i tried twice. please help.

Editorial Team MOD
May 13, 2013 at 10:53 AM

Please provide your blog URL?

July 18, 2013 at 9:13 PM

Great work ...
On other site "maxresults=5"
& on your site "maxresults=any; so you are on No.1

September 18, 2013 at 10:09 AM

this widget is good but i want it in two rows. how to do that, you told in a comment that its thumbnail can be enlarged. but the problem is to show this widget in two rows, would you please help?

April 24, 2015 at 12:07 PM

Resize thumbnail only makes the image more blurry..
Can you fix it?

Editorial Team MOD
April 26, 2015 at 11:57 AM

Apply this tutorial

http://www.mybloggerlab.com/2014/06/how-to-improve-image-quality-issue-in.html

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.