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 == "item"'><script type='text/javascript'>//<![CDATA[var ry='<h3>Related Posts</h3>';rn='<h3> 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/AVvXsEin5Q_HtyCH3hQb_3mEXvjebQ_-F8I5WrBitz6WwzT4VRh_inKPyjs50kI7VX71AMfyrdxudl6rUcrAo0NFMdVGI58TZEFjLFnpgc-5rRV3hQnxOrrjKmQwR0NJY3m4jtEJ24eKq0rhtXNm/'};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='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"' type='text/javascript'/></b:loop><script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</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.
About the Editorial Team
The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).
58 comments
Woow Great Post Brother.
Thanks
techzain.com
Thnx for accepting my request bro :D
New type Of Related Widget
Thanks For Ur Efort.
Make optical illusion image Use MS Paint
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
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
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
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.
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.
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
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
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
Sure Dude, You are one of our oldest readers. Peace
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
syed faizain ali bro please tell the font names
the widget is nice :) :) :D
MyPremiumTricks
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?
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
Sorry, Its our Custom Fonts. However, we can provide a bit similar one if you are interested.
Yes syed i have removed the coding as it was not working.
what should i do now?
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
:-) 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?
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 :)
For comments I am using the Feed and NewsReel for retrieving tech news.Kindly check it on theme.
Wait for Few Days! Till We check them :)
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.
Dude Don't Send me the Code, Send me the Complete template in XML Format.
but there is no any option to upload anything,
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
Wonderful syed. love the way you explained it through.Well done.
I tried saving the template but it conntinues to load my new edit
Its Your Internet connection Error. As Long as It didn't give any errors!
How do i know my new edited template is saved.What page does it loads.Thanks.
Once, Your Template is Saved It will Stop Displaying the "Loading" Gif.
Awesome, Beautiful And useful Widget. thanks for Sharing Post :)
Regards
Rahul Kashyap
Blog: SDMMovies.com | Movies4u.us
My templates has only these two lines of second step
I pasted the code below them but related posts are not appearing
InternetDreamz
We have seen you are using a Social Bookmarking Widget, Try to Paste the Coding under it. Hope that helps.Peace
Thanx :D
wonderful brother..nice widget
Blogging Tips & Tricks
@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
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!
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
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
Hi Syed
I am not getting these codes in My blog templet can you please help
my blog is
www.guidemumbai.com
Paste the Related Post Script Just Next to your Home, Newer and Older Post Buttons. Hope that Helps Peace.
Hey Syed.
Second Block Coding cannot find in my blog
help
Can you Please Provide a Link to your Blog or your Template in XML Format so we can help you more. Peace
can i add this widget after comment box of post?
Hello Bro,
I would like to implement the same in a wordpress blog. Can you please help me?
Sorry, We don't Support WordPress
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.
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/
There must be some problem with your Theme
brother wadgets not inserted to applying this method i tried twice. please help.
Please provide your blog URL?
Great work ...
On other site "maxresults=5"
& on your site "maxresults=any; so you are on No.1
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?
Resize thumbnail only makes the image more blurry..
Can you fix it?
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.