Related Posts Widget for Blogger Blogger User

Displaying related posts at the end of each post is an important feature of all modern blogs.

By adding related posts widget on your blogger blog, you are helping your readers to discover more posts of their interest on the blog. Your blog, at the same time, benefits from additional page views among several other benefits.

Follow this tutorial to know more about related posts and implementing related posts widget on your own blog.

What are related posts?

Related posts are links and thumbnails to other related blog posts that are displayed along with the single main post. It is one of the essential features of the blog that helps bloggers to increase their page views and search engine optimisation (SEO) aspects. Visitors to the post are certainly interested in knowing more about the topic. Related posts can help them to explore more on the topic from the same blog, thus helping to increase page views. Similarly, by providing links to related posts, bloggers can also benefit from the SEO aspects.

Adding Related Posts Widget for Blogger Blogs

In this Blogger tutorial, I will go through few steps to help you add a simple related posts widget for Blogger blog of your own.

Warning: Remember to backup your template before you make any changes to your HTML code, so that you can easily restore if the widget didn’t work for you.

1. From your Blogger Overview, click on the Template link on your left menu. Once you are Template page, click on the “Edit HTML” link under the live preview of your blog. Overview > Template > Edit HTML

Blogger Template Edit HTML

2. Press CTRL+F on your keyboard to enable the search box inside your template editing box and search for tag.


Search Blogger Template Html

3. Copy the code below and paste it just above that tag.

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #f2f2f2;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;}
#related-title {color:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='' />
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Widget Code Configuration:

  • Height and width of your widget can be customised by changing the figures on highlighted line 8, which is set at 100px (width:100px;height:100px) in the code.
  • The size and colour of the related posts’ title can be changed by changing the values in the highlighted line 9, which is set at color:#222; and font-size:14px above.
  • This code will only allow you to display related posts on your single pages. If you want the widget to be displayed also on your homepage, delete the highlighted lines 2 and 12 from the above code.

4. Press CTRL+F again and search for the below code in your template. (In case you found two results for the code, use the code found second time.

<div class='post-footer'>

5. Copy and paste the below code just above the line you found in step 3.

<!-- Related Posts with Thumbnails Code Start-->
<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;'>
<b:if cond='data:blog.pageType == &quot;item&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:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
</div><div class='clear'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href=''><img alt='Blogger Widgets' src=''/></a>
<!-- Related Posts with Thumbnails Code End-->

Widget Code Configuration

  • Edit the value of 5 in maxresults=5; in above highlighted line 11 to display the number of posts that you want to display in your blogger widget.
  • Similarly, delete the highlighted lines 2, 6, 17 from the above codes if you also want to display the related posts widget on your homepage of the blog.

6. Click on “Save Template” to make changes and with that added successfully, you should now have related posts displayed on your blog.

Other ways to add Related Posts widget

This is certainly not the only way to display related posts widget for Blogger blogs.

There are other external sites such as LinkWithin that enable you to add related posts to your blog with few lines of code. Also, there are plenty of other similar widgets that can enable you to display related posts.

With more and more blogger using customised templates, it, however, becomes difficult to find one widget that fits all.

Also, not surprisingly, most of the custom blogger templates these days have the feature built in their template. If the above widget doesn’t work for you, I recommend checking out another post – Related Posts Widget for Blogger with Thumbnails that I wrote back in 2010.

Let me know if the widget works for you in the comments below.

Published by Pradeep Singh

Pradeep is your host at BloggerUser helping you to build your blog by providing Blogger tips, tutorials, guides, free blogger templates and more.


  1. Hey Pradeep,
    First, thanks for great article. We built Limk as related posts widget for Blogger.
    Launched early in this year and the platform served over 500 million recommendations with hundreds of happy publishers.

    Key advantages of Limk:
    – Limk related posts widget is using the direct internal URLs, no redirection urls. Good for SEO juice.
    – Mobile ready, looks great on mobile phones and tablets
    – Stats panel gives all the data you need.
    – Optional monetization is available for publishers.

    Bloggers can give it a shot (it’s free by the way):

    Would love to help anyone to try our platform:

  2. It worked perfectly. Thank you so much.

  3. Hi, nice article. But this is not working at my following site.


Leave a Reply

Your email address will not be published. Required fields are marked *

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match