Related Posts Widget BloggerBlogger widget “related posts” in blogger or blogspot blog is one of the blogger tools that help to add related articles to each of your blog posts. Related posts are selected according to your category, label or tag that you add to categorize your blog post. Related posts widget helps to increase your page visits by making users to discover other similar user interested topic posts from your blog, thus making your blog more user friendly. This Related posts hack is really useful tool for your blog that can help you to make your blog professional and at the same time can keep users for a long span of time on your blog. Below is a step by step manual instruction or blogger hack on adding “related posts widget” to your blog.

Follow the below steps properly and in order to have the similar widget you see in the pic above.
Widget Adding Instructions:

1. Go to Blogger Dashboard – click Edit Layout – then click Edit HTML

Blogger Edit Html
Wait: Before Editing your Template, Save a copy of your current template by clicking ‘Download Full Template’ in ‘Edit HTML’ page of the Blogger ‘Layout’ Window and ‘Preview’ the changes before Saving.

2. Check the ‘expand Widgets Template Box” as shown in the figure below.

Blogger Expand Widget Templates

3.Then Search (Ctrl+F) the code given below in your template:


4. Copy and Add the code given below just before the above line:

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='' type='text/javascript'/>

5. Again Search(Ctrl+F) the code given below (or similar) in your template:

<div class='post-body>



6. Add the code given below just after the above line

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><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&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();

7. Save your Template. That’s it.

Widget Customization

Customize Blogger WidgetYou can change the number of maximum related posts being displayed, search for the code below (within the code given in step 6) and change the number “5″ to any desired number.


Its good to have related posts in accordance with the space available to display. Generally, five posts is enough. However, you may display the number of posts you like.

Widget Use and Summary

This widget is not only important widget for making your blog look professional but also an important widget to help your blog users to quickly navigate on another important and related post.
Help and Comment

Help and comment

If you have any problems or any queries related to this widget, Please leave a comment below and I would be glad to help you !
Meanwhile, you can also visit “Related posts by category Blogger widget” for a similar widget.
Also I want to know your view about this widget. So Comment !

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. Hi! I tried this and it was the easiest code to work with. Great job! However, I can’t seem to get the maximum number of related posts to work. Sometimes i have a total of 10 related posts displayed. I tried changing the 5 to 4 but still, lots came out. any advice?

  2. @ Ria ..
    Hi ria i think you should try working with it again.
    Its (the customization) is working for my blogs and i think it too should work with you.

  3. nothing comes out. does it clash with linkwithin widget?

  4. may be you misplaced the codes… you can use this first and then the linkwithin after adding this…

  5. Thanks for this tips…Great Jobs!

  6. […] shows related posts according to user defined categories at the end of each post. Another widget “Related posts widget for blogger” displays only a list of related posts but this widget shows posts under different labels, […]

Comments are closed.

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