Related Posts Widget With Thumbnail For Blogger - Helper Blogger

Blogger Widgets | Templates | Tutorials


Sunday, 22 January 2012

Related Posts Widget With Thumbnail For Blogger

Related posts widget is a great widget to increase your post-views.You can add related posts just below of the every blog post.It also shows thumbnails to attract the users.This widget was designed by bloggerplugins. I customize this widget and brought to you.If you like this then surely add it on your blog.... 

How To Add It On Blogger

  • Go to Blogger Dashboard > Design > Edit HTML.
  • Expand Widget Templates Box.
  • Now find </head> using CTRL+F function.
  • Paste below code just above/before </head> tag.
<!--BTSNTS Related Script Posts Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
#related-posts a{
#related-posts a:hover{

#related-posts a:hover {
<script type='text/javascript'>
var defaultnoimage="";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
<script src='' type='text/javascript'/>
<!-- remove --></b:if>
<!--BTSNTS Related Script Posts Ends-->

Now Find any one of these -

<div class='post-footer-line post-footer-line-1'>

<p class='post-footer-line post-footer-line-1'>

And paste below code just after/below this code....

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
</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=''><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="" /></a><a href='' ><img style="border: 0" alt="Blogger Templates" src="" /></a>
<!-- Related Posts with Thumbnails Code End-->


You can adjust the maximum number of related posts being displayed by editing this line in the code.

var maxresults=5;

You will also have to edit the posts per label(it should ideally be one more that maxresults)


To edit Title of the widget find this line

var relatedpoststitle="Related Posts";

To change the default thumbnail, you can edit this line of code

var defaultnoimage="";

To Change the Colour of the Splitter Line

var splittercolor="#d4eaf2";

Please do comments about this widget.If you are getting any problem then please mention it in comments......


  1. Hi Rahul!
    Tried doing this several times, but didnot work. my comment form disappears.could it be a problem with my template. i tried using linkwithin and nrelate too, but nothing works. could you please help me.



If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account). PLEASE DO NOT SPAM