How to Add Related Post Widget with Thumbnails to Blogger Blog


How to add Related Post with thumbnails, Related post widget to blogger, Stylish and Responsive Related Post widget. Hello Reader’s! How are you? I Recommend you to Please Read last post of this blog A Stylish Social Media Follow Widget to Blog without Plugin. After that today in this post i am going to share How to Add Related Post Widget with Thumbnails to Blogger blog. First I want to say about me, I am Co-Author of This blog from India. Do you know blogger is the top most popular free blogging platform that’s managed by google.

Related Post Widget with Thumbnails

If you are Newbie in Blogging many blogger tell you about start blogging from If you want to know how to start a new blog please read How to Create a Free Blog on if you have already created a free blog on, I I will tel you in this post how to add awesome related post with thumbnails in your blog.

How to Add Related Post widget with Thumbnails

Related post widget with thumbnails is a really good widget because it helped to increase page view of your blog. It’s also helped your blog to reduce bounce rate of your blog. That’s why you need to use this widget on your blog.

related post with thumbnails

Step#1- First Log In to your Blogger Dashboard.

Step#2- Click Theme Option and Click Edit HTML Option

Step#3- After That Press Ctrl+F and Find </Head> tag in your template.

Step#4- Copy the Below Code and Past it before the Closing </Head> tag.

<!–Related Posts with thumbnails Scripts–>
<!– 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, ‘Times New Roman’, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
#related-posts a{
#related-posts a:hover{

#related-posts a:hover {

var defaultnoimage=’’;

var maxresults=5;
var splittercolor=”#d4eaf2′;

var relatedpoststitle=’Related Posts’;

<script src=’’ type=’text/javascript’/>
<!– remove –></b:if>
<!–Related Posts with thumbnails Scripts–>

Step#5- Now find any of below code in your template:

Step#6- Now immediately after found any of these lines (whichever you could find) place the code snippet below

<!– 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=5&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=’’ rel=’dofollow’>Related Post Widget</a>

Step#7- Now Save your template.

Step#8- You have Successfully Add Related Post Widget with Thumbnails to your blog.

Also Read:- Top 10 Premium Looking Free Blogger Template (SEO Ready)

1. If you want to change total no of posts displayed in your blog posts, Edit the following line of code.
var maxresults=5;

2. To Change the title of your related post widget, change the following line of code.
var relatedpoststitle=’Related Posts’;

[quads id=3]

I hope this tutorial of How to Add Related Post Widget with Thumbnails is useful to all of you, If you like this post please share it with your friends and if you have any question regarding this post then you can ask with me in below comment box.

Did You Enjoy this Article ?

If yes, Then enter your email below to get more such great articles in your inbox For FREE !

About Geeta Prasad 2 Articles
Hi Guy's, I am Geeta Prasad Co-Author of Banshidharinfo, here at BanshidharInfo I write about Blogging, SEO, Internet, Online Money making and other Interesting Tips

Be the first to comment

Leave a Reply

Your email address will not be published.