How to Add Custom Simple Related Posts Widget in Blogger

Related posts widget will also help you reduce bounce rate on your blog, thus increasing pageviews and revenue generated by the ads. As Blogger doesn’t have built-in related posts widget, so you have to add it manually on your blog.

Here we have a very simple related posts widget for Blogger which is created using HTML, JavaScript and JSON feed. It will display the most relevant posts based on the post label/tags.

Some features of this related posts widget

Here are some of the features of this related posts widget –

• Simple UI – This widget has a very simple look as there isn’t any post thumbnail and description. It can fit on any blog design/theme.
• Fast loading – This related posts widget takes very less time to load. Moreover, it doesn’t have much effect on the web page loading time.
• Relevant posts – This related posts widget will display relevant posts based on the post label/tag. For example, if you tagged a post in Android category, then it will display Android related posts only.
• Decreases bounce rate – Once after adding the related posts widget on your blog, you will find some increase in the page views and decrease in the bounce rate.

You can see the live preview of this related posts widget at the end of the post on our blog.

How to add related posts widget in Blogger

Follow this step-by-step guide to add related posts widget on your Blogger blog –

1. First, login to your Blogger account and open your blog dashboard.
2. Go to Template > Edit HTML.
3. Click anywhere in the template editor and press CTRL+F shortcut key to open the search box.
4. Now search the following code:

   <div class="post-footer">

5. Just below <div class=”post-footer”>, paste this code:

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts ul {padding: 10px 0 10px;margin: 0 0 0 30px;}#related-posts ul li{list-style-type: none;}#related-posts ul li a:hover {color:#00BCD4;transition:all 0s ease;text-decoration: none;}#related-posts h3 {font-family: 'raleway';padding:10px;text-align: center;border-bottom:2.5px solid #eee;font-size: 25px;font-weight: normal;color: #000000;margin-bottom: 0.75em;}</style>
<script type='text/javascript'>
var relatedpoststitle="You May Also Like.."; 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('<h3>'+relatedpoststitle+'</h3>')}document.write('<ul>');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('</ul>');relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length);}
</script>
<div class='clr' id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'> var maxresults=5;  removeRelatedDuplicates();  printRelatedLabels(&quot;<data:post.url/>&quot;); </script></div>
</b:if>

• Change the default value of maxresults=5 with the number of posts you want to display.
• If you want to change the title of the widget, replace You May Also Like.. text.
• You can also change the font family, size, and other CSS properties according to your blog design/theme.

Note: There may be more than one occurrence of <div class=”post-footer”> code in your blog template. If the widget isn’t working with the first occurrence of the code, try it with others.

6. Finally, click the “Save theme” button to save the changes. That’s it.

As already mentioned, this widget will display a list of related posts based on the labels. So make sure to tag your blog posts with the correct labels (Add maximum 2 or 3 single keyword labels).

• Also read: How to add custom recent posts widget in Blogger

We hope you find this related posts widget awesome for your Blogger blog. If you are facing any problem, please do share it in the comment section.