Related Post Widget For Blogger

Related Post Widget is essential widget for bloggers blog, it displays posts title of the posts that is in same category with the article a visitor is reading at the bottom.

With this you can increase your page views of your blog posts and make visitor find it easy to view other posts on your blog.

Below is a simple tutorial on how to add and display links to related posts beneath each posts.

How to Add Related Post Widget For Blogger

1. Log in to Blogger account and Go to Blogger Dashboard.

2. You need to Backup your blog template before adding the code.
  
    Click Template, select Backup/Restore and click on "Download full template" button,
    your template will download automatically within a seconds.

3. After downloading your Template close the popup bar by clicking Close Icon at the bottom.

    You need to edit your template code by Clicking on  "Template" and select "Edit HTML"

4. Now click anywhere inside the template code area and find (CTRL + F) the code below in your Template

    <div class='post-footer-line post-footer-line-1'> or 
     <div class='post-footer-line post-footer-line-1'/>
  
If you do not see it, try to find the one below

    <p class='post-footer-line post-footer-line-1'/>
  
                    OR
                  
    <div class='post-footer-line post-footer-line-2'/>
    <div class='post-footer-line post-footer-line-3'/>
  
5. Paste the below codes just after or below it

<script src='http://dl.dropboxusercontent.com/s/c65xwzi0gc8z906/related-posts-min-1-ycode.js' type='text/javascript'/>
<link href='http://dl.dropboxusercontent.com/s/cw3uzumndqt1od3/related-posts-min-4.css' rel='stylesheet' type='text/css'/>
<a href='http://techbrainbox.com.com/' rel='dofollow' target='_blank' title='Tech & Blogger Tips'> TechBrainBox</a>
<div id='related-posts'><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; + data:label.name + &quot;
?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;
' type='text/javascript'/></b:if></b:loop>
<h2 class='title' style='color:#fff;background-color:#000;width:150px;'>Related Topics</h2>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

6. Save your Template. You are done!

To Make Changes

To Increase the Number of Related Posts to be display below each post
var maxresults=5; replace the 5 with the number of post your want.

To Increase the Width of the Related Posts Widget
width:150px; replace 150 with the number you like.

To Change the Widget Title (Related Topics)
Replace "Related Topics" without quote with your one word e.g.
You May Like This   or   Also Read This Post   or   Recommended Posts For Your
Have your added this wonderful widget to your blog? Or you just want to add it, let’s hear from you.
Kindly share this post with your friends and others bloggers by using the share button below.
Thanks!!!