How to Add Related Posts Widget to Blogger

People always wonder that how many blogs are able to display something like a list of "Related Articles" just beneath each and every post. It not only helps the user to find the next relevant topic but also engage them for a longer period. Having a related posts widget generates more engagement to the site and more importantly it drives more traffic to the blog. By adding related posts below your Blogger posts you will get more page views. The more page views in more Alexa rank is more you have chance of making money.

Here is a wonderful tip for displaying related post beneath each of your blog posts, along with thumbnails.

1- Go to Blogger Dashboard  >>  Template  >>  Edit HTML
2- Press Ctrl+F to enable search box and search for the  </head>  tag
3- Copy and Paste the below code just before/above the </head> tag

<!--Related Posts with thumbnails Scripts and Styles Start-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'>

#related-posts{float:left;width:auto;}

#related-posts a{border-right: 1px dotted #eaeaea;}

#related-posts a:hover{background: #EEEEEE;}

#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:2px solid #f2f2f2;width:110px;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;-webkit-border-radius: 5px;  -moz-border-radius: 5px; border-radius: 5px; }

#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}

#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>

<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />

</b:if>

<!--Related Posts with thumbnails Scripts and Styles End-->

  

Note:

• To change the width and height of thumbnails, modify the 100px and 100px values in Red color
• To change the color and size of related post titles, change the value in Blue color
• Remove the line in Pink color if you want the related posts to be displayed both in homepage and post pages.

4-1- Find the line below (you will find two lines, but you to stop at the second one)

<div class='post-footer'>

5- Just above the <div class='post-footer'> paste this code:

<!-- 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>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &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'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style="font-size: 9px;float: right; margin: 5px;"><a  style="font-size: 9px; text-decoration: none;" href="http://www.sharetoworld.com/2014/11/how-to-add-related-posts-widget-to.html" rel="nofollow" >Related Posts Widget</a></div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Note:

• To change the 5 value from max-results=5 with the number of posts you wish to be displayed
• If you want to related posts to be displayed on homepage too, then remove the lines in Pink color

Note: If you are unable to see the related posts widget after saving the template after add code at step 5 so here is the solution:

4-1 Find the line below:

</b:includable>
    <b:includable id='postQuickEdit' var='post'>

5- Just above the </b:includable> paste this code:

<!-- 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>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &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'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style="font-size: 9px;float: right; margin: 5px;"><a  style="font-size: 9px; text-decoration: none;" href="http://www.sharetoworld.com/2014/11/how-to-add-related-posts-widget-to.html" rel="nofollow" >Related Posts Widget</a></div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Note: 

• To change the 5 value from max-results=5 with the number of posts you wish to be displayed
• If you want to related posts to be displayed on homepage too, then remove the lines in Pink color

6- Save Template.

That's it.
Don't forget to share this awesome tip to your friends by clicking sharing buttons below.