Add Related Posts in Blogger

You must have seen many blogs which provide tutorials to add Related Posts below the Blogger blog posts. These widgets are very useful, however it involves adding lots of code to your blogger template which may be difficult for some people. However, below provided is a simple and wonderful way to add related posts to a blogger blog. This method is very useful for those blogspot users who dont know much about coding and also for the other users.
With this trick many of your readers will remain on your site for longer periods of time when they see related posts of interest.

1. Add the following code to the header of the blog (ie before /head) -
   

   <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 {
    color : #333333;
    font-size : 13px;
    font-weight : normal;
    margin : 5px 7px 0;
    padding : 0 0 5px;
   }
   
   #related-posts a {
    color : #054474;
    font-size : 11px;
    text-decoration : none;
   }
   
   #related-posts a:hover {
    color : #054474;
    text-decoration : none;
   }
   
   #related-posts ul {
    border : medium none;
    margin : 10px;
    padding : 0;
   }
   
   #related-posts ul li {
    display : block;
    background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm2dAo8MA5jEWopkEYNc78xPsu9UmCHLKxSpdrdZCLAcetHBtrvsumaspO6EIxI29oILcXQ27Ma-ERQTR84e3cVq0TC0jRw4JrR4rJZhfG5zVk5xGWjJT_baUGQ8-OoEEe_HX4I6cQ75fD/s1600/newconcept_bullet.png") no-repeat 0 0;
    margin : 0;
    padding-top : 0;
    padding-right : 0;
    padding-bottom : 1px;
    padding-left : 16px;
    margin-bottom : 5px;
    line-height : 2em;
    border-bottom:1px dotted #cccccc;
   }
   </style>
   
   <script type='text/javascript'>
   //<![CDATA[
   var relatedTitles = new Array();
   var relatedTitlesNum = 0;
   var relatedUrls = new Array();
   function related_results_labels(json) {
   for (var i = 0; i < json.feed.entry.length; i++) {
   var entry = json.feed.entry[i];
   relatedTitles[relatedTitlesNum] = entry.title.$t;
   for (var k = 0; k < entry.link.length; k++) {
   if (entry.link[k].rel == 'alternate') {
   relatedUrls[relatedTitlesNum] = entry.link[k].href;
   relatedTitlesNum++;
   break;
   }
   }
   }
   }
   function removeRelatedDuplicates() {
   var tmp = new Array(0);
   var tmp2 = new Array(0);
   for(var i = 0; i < relatedUrls.length; i++) {
   if(!contains(tmp, relatedUrls[i])) {
   tmp.length += 1;
   tmp[tmp.length - 1] = relatedUrls[i];
   tmp2.length += 1;
   tmp2[tmp2.length - 1] = relatedTitles[i];
   }
   }
   relatedTitles = tmp2;
   relatedUrls = tmp;
   }
   function contains(a, e) {
   for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
   return false;
   }
   function printRelatedLabels() {
   var r = Math.floor((relatedTitles.length - 1) * Math.random());
   var i = 0;
   document.write('<ul>');
   while (i < relatedTitles.length && i < 20) {
   document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
   if (r < relatedTitles.length - 1) {
   r++;
   } else {
   r = 0;
   }
   i++;
   }
   document.write('</ul>');
   }
   //]]>
   </script>

   
   
2. Then look out for <data:post.body/> and just below that paste the following code
   

   <b:if cond='data:blog.pageType == "item"'>
   <div id="related-posts">
   <h2>Other Recommended Posts on <b:loop values='data:post.labels' var='label'><data:label.name/><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>
   
   <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
   
   </div></b:if>



3. Thats it! Next step is to label your posts (if you haven't previously)

After these steps just load your blog and see the results.

You can change the number of related posts by editing the max-results=5 (from the second point)