Related post widget with thumbnails is a good widget all bloggers ought to have on their blog since it increases page views & readership while your blog traffic bounce rate will decrease gradually.
This widget will show beneath every post(s) on your blog. Go through the steps below to make this widget work on your blogger blog.
Read:
How to redirect 404 Error Page to Homepage in Blogger
Related Posts Widget with Thumbnails for Blogger
1.Log in to your Blogger Dashboard and Navigate to Template. Then use (CTRL+F) to find </head> in your templates.
2.Paste the code below before the closing </head> tag.
<!--Related Posts with thumbnails Scripts www.justnaira.com-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_jM8-wHc3NKY/TPyEXEv34II/AAAAAAAAADE/pgs7crFJ_D4/s1600/no+Image+1.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://olusegun-fapohunda-calculator.googlecode.com/svn/wiki/related-post-with-thumbnails.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts www.justnaira.com-->
3.Now find any of this code in your template:
<p class='post-footer-line post-footer-line-1'>
Or
<div class='post-footer-line post-footer-line-1'>
or
<div class='footer'> Now immediately after any of these lines (whichever you could find) place the code snippet below
<!-- Related Posts with Thumbnails Code Start www.justnaira.com-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.justnaira.com/2012/07/how-to-add-related-post-widget-with.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://3.bp.blogspot.com/_jM8-wHc3NKY/TPyFOT4CmhI/AAAAAAAAADM/MvlLp1fyfoM/s1600/blogger-widgets.png" /></a><a href='http://www.justnaira.com' ><img style="border: 0" alt="Blogger Templates" src="http://4.bp.blogspot.com/_jM8-wHc3NKY/TPyE7xQNQxI/AAAAAAAAADI/GzCRDLFH7s0/s1600/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End www.justnaira.com-->4. Now Save your template.
Widget Configuration
1. To change the total no of posts displayed in your blog posts, Edit the following line of code.
var maxresults=5;2. To Edit the title of the widget, change the following line of code.
var relatedpoststitle="Related Posts";That’s all.
How does it decide which post to show is it random based on label?
It worked fine! only that it;s not showing on PC view… thanks man. http://www.supremegist.com
Daniel Nicholas, after which of these code
<p class='post-footer-line post-footer-line-1'> Or <div class='post-footer-line post-footer-line-1'> or <div class='footer'>did you place the code given above?Hello bro… it working very fine,, but when someone click on any related topics on mobile itwill show pc view can you please tell me what to do that i can redirect the topic link to /?m=1 please here is my mail: loadedcityofficials@gmail,com
@Rayshy, it should be showing the mobile version. Try to use another mobile browser.
Thanks! works wonderful.
Was wandering how can i make the related posts bigger . They are very small…
It working on my blog
I’ve tried it, but after a few days it disappears suddenly. I do not know for what,
@mike, it can’t disappear unless you tampered with the code.
I followed all the instruction, I have also a label on my post.. why it is not working for me..
@Knowils, what’s your blog address?
Thank you so much, its now working. I just paste the 2nd code after (data:post.body/) my blog address is http://www.knowils.info
@knowils, glad it works.
@lilacglasses, you can hire me to implement the code on your blog. Contact me through admin(at)justnaira(dot)com
Nothing that i do seems to work. It has driven me crazy!!!! i have done this many times, tried different codes that i found on the internet, tried linkwithin but nothing works! what can i do? what is wrong?
Worked perfectly well for me. One thing I like about the related posts widget is the default “No image” image. But the bottom line is I like everything about the related posts widget. Thanks Fapohunda.
thank you for this widget
Great Tutorial Thanks For It..
thanks very nice post
@Gurpreet singh guri, you’re welcome
@Mireille, the codes must be in your templates. May be you don’t tick the Expand Widget Templates.
hi! I’m pretty new at this and kinda clueless… I tried following your steps . I founde the head but I can’t find the other 2 codes..what am I doing wrong?
thanx for posting it
@jayr, you’re welcome
Thanks!