Are you looking to increase page views of your blog? This should be a must have widget for your blogger blog. 
Related Posts with thumbnails is not just a one more related posts widget. This widget really looks good with the content and thus adds something worth to the overall design of your template. It helps your readers to go through the similar posts they were reading and so helps to decrease your bounce rate by increasing page views. Wow! Both design and better functionality at same time.
In this post we will go through the steps of adding the Related Posts Widget with thumbnails for Blogger. Ready to add to your template? Go through the steps below.
1. Go the Blogger Dashboard and Navigate to the Layout button of your template.
2. Go to the Edit Html of your Blogger Template.
3. You Need to check the “Expand Widget Templates” check box.
4. Now look for
</head>
and ABOVE the code; copy the following code.
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- 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/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
5. Now find the below Code in your template. Remember easy way to locate codes if by using the Find option (ctrl+F) and copy pasting the code.
<div class='post-footer-line post-footer-line-1'>
or
<p class='post-footer-line post-footer-line-1'>
6. After you have located those codes, copy the following code and add it AFTER the code.
<!-- Related Posts with Thumbnails Code Start--> <!-- 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=6"' 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.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://www.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Widgets" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a> </b:if></b:if> <!-- Related Posts with Thumbnails Code End-->
Widget Configuration
To change the widget’s default configuration, you need to edit the following lines for respective settings.
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";
3. To edit the default thumbnail (the image which is displayed when no image is there in your post), edit the following line of code.
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
4.To Change the Colour of the Splitter Line , edit the following code.
var splittercolor="#d4eaf2";
You can make additional changes according to your need. This plugin was developed by Aneesh from Blogger plugins. Thanks for him for developing a really useful widget.
Are you using this widget or did you run into any problems with the widget ? Let us know in the comments below.
I followed the instructions… I don’t see anything new in my entries. Have any tips?
Its work for my blog : Sarwa Sunda
, thanks.
it did not worked my new blogger temp. please help
thanks it works demo
J’aime je partage
dude thanks! although can this work on related posts with categories?
Followed instructions. Nothing changed. Recent Posts are not shown.
thanks dude it works to me.
Thanks. One of the best one
Hi and thank you.
I put it in like you instructed. I didn’t change the default just to see if it would work first and I don’t see it on my blog. Can you give me any pointers? Maybe its my template?
Thanks for your help!
Karen
Followed the directions but nothing happened… Is there a certain amount of time it will take to enact?
Thanks!
Ok, it looks like some of you have some problems with adding this amazing feature. I can guess some points.
* There may be more than one
/so check it first. If there are try the last one or try applying the code till you get the right one.*If above one does not work find,
in your template. yep, as the earlier time if there are more than one , try the last one or try applying the code till you get the right one. and paste the second code after that. (as instructed to paste it after
Hope this will help. All the best.
Opppps, my codes does not appear in my reply.. So I’ll repeat my reply again:
————————————————————–
Ok, it looks like some of you have some problems with adding this amazing feature. I can guess some points.
* There may be more than one
/
in your template. So check it first. If there are, try the last one or try applying the code till you get the right one.
*If above one does not work find,
in your template. yep, as the earlier time if there are more than one , try the last one or try applying the code till you get it to work, and paste the second code after that. (as instructed to paste it after )
Hope this will help. All the best.
Bad luck of you, I think my code parts have to be moderated. You will see them later. If not I’ll reply again. and good luck Pradeep Kumar Singh. You doen a greate work.
Bad luck of you, I think my code parts have to be moderated. You will see them later. If not I’ll reply again. and good luck Pradeep Kumar Singh. You have done a great work.
hey , to display related post , you need to put labels ……..
those who didint get results put same label on two posts then see one post u will get related post ……………
this is good and fine …………than widgets linkwithin and outbrain.
Thanks bro…
i followed the instructions, but nothing showed?!
its working dear
Posted it in as instructed and I’m afraid nothing changed. Using a blogger customised standard template (ethereal). Does it not work for some templates?
Thanks,
Jess
Hi,
I already had this one on my blog befor but after I change my template to “the journalist” from “minima” it stop working.
I already re install the cript and still not :S and I want it back on my blog.
Help please! thanks
looking for more posts similar to this one. Bravo.
Do Not Work In Some Template…Why ?
it worked for me..thanks
I tried this on my blog, added all codes you give. But nothing changed. No related posts shown. I tried this 3 times, but no results. Whats wrong with me ??
thanks for help me with this code
I too tried more times still no effect can u help for http://www.gusgadgets.net
hey admin can you help that how you add script in post as it’s showing in above post
copy it and paste !!!!
it is seem to simple in the abover you add it nicely
i hope you under stand my problem
forexamle
#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;
}
var defaultnoimage=”http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png”;
var maxresults=5;
var splittercolor=”#d4eaf2″;
var relatedpoststitle=”Related Posts”;
Thanks!