Add Related Posts Widget Without Thumbnails to Blogger

You can reduce your website's bounce rate and generate more pageviews by adding related posts along side your article. A visitor is very much likely to read related articles if they are available. Here, I have posted an tutorial on adding related posts widget without thumbnails to your blog.

There are many related posts widget available that you can add your blog, but if you are looking for a widget that you can add to your blog and customize as per your requirement, there is one for you.

The related post widget I am going to share is simple to use. But, i am not going to share any CSS or extra HTML code related to implementaion of widget. You are free to use this related post widget on your own.

Related Posts Plugin Without Thumbnails

1. Add the code snippet given below before </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
      <script type='text/javascript'>
      var relatedpoststitle=&quot;Related Articles&quot;;
      </script>
      <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(currenturl){for(var i=0;i<relatedUrls.length;i++){if(relatedUrls[i]==currenturl){relatedUrls.splice(i,1);relatedTitles.splice(i,1)}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>=1){document.write('<h4>'+relatedpoststitle+'</h4>')}document.write('<ol>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</ol>');relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length);}
      //]]>
      </script>
    </b:if>

2. Add the code snippet given below where you wanna related posts to appear.

<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> 
  <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=6&quot;' type='text/javascript'/>
  </b:if>
  </b:loop>
  <script type='text/javascript'> var maxresults=6; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script>
  </div>
</b:if>

I have kept this article simple, if you face any problem feel free to comment.