Subscribe For Free Updates!

We'll not spam mate! We promise.

Thursday, May 30, 2013

Add Related Posts Widget For Blogger With Thumbnails

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.

By displaying the links to related posts along with a thumbnail of the corresponding post will help you increase the page views/user .Users will be tempted to go for the related posts when they are presented attractively with thumbnails.

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.

How To Add Related Posts Widget For Blogger With Thumbnails

  • First for All Go To > Design > Edit Html
  • Find </head> Using CTRL+F
  • Copy the code below and paste it just after </head> tag 
<!--Related Posts with thumbnails Scripts and Styles Start B2W--><b:if cond='data:blog.pageType == &quot;item&quot;'><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, &#8220;Times New Roman&#8221;, 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="";var maxresults=5;var splittercolor="#d4eaf2";var relatedpoststitle="Related Posts";</script><script src='' type='text/javascript'/></b:if><!--Related Posts with thumbnails Scripts and Styles End B2W-->
  • Now find the following code: 
<div class='post-footer-line post-footer-line-1'>
  • If you can't find it, then search for this one: 
<p class='post-footer-line post-footer-line-1'>
  • Copy the code below and paste it just after <data:post.body/> tag and save your template.   
<!-- Related Posts with Thumbnails Code Start B2W-->
<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="Blogger Widgets" src="" /></a>
<!-- Related Posts with Thumbnails Code End B2W-->
  • Change the 6 value from max-results=6 with the number of posts you want to be displayed.  

Please Give Us Your 1 Minute In Sharing This Post!
Follow us →
Share It →


  1. thank you see this

  2. I keep getting my signature as the default picture for my posts (even though they have other pictures. (I changed the link to show a different picture, if there is no picture), so you can see what I mean.

  3. Nice interesting! more & BEST at about Customizing, Monetizing, Advertising,SEO, Driving traffic, ...

  4. its not working in my blog,im trying

  5. Nice post....

    Kashif Bro I am also pakistani and can you plz give me your personal fb profile id to that i am very thank full to you.
    PLz send you fb profile id plz, i want to get some help from you...

  6. thank very much this is exactly what i was looking for

  7. excellent post,i really like the your post,thank you for the sharing this excellent post,| Search Engine Optimization | Seo Ebooks | Blogger Widgets | Blogger Templates |

  8. thanks visit it

  9. It's not working in my blog why?

  10. great tutor. just add your link to my blog here

  11. Not working on my blog.check here on my blog.what is error...

  12. excellent post

  13. its not working for my blog. why? help

  14. this helps me well done
    Happy Diwali 2013enjoyed this post

  15. Not working for my blog

    I've tried many different techniques, but can't get anything. Is it because I'm using a custom template?

  16. wow it works well thank you :)

  17. This comment has been removed by the author.

  18. helped me to improve.... Am new to the world of internet and its wide oppurtunities...... Make Money , Blogging Tips

  19. Sorry Dear Help its not working on my Both of Blogs... and ..... Kinldly Help

  20. <a href='>Thnx It Was Helpful</a>