Add Related Post Widget to Blogger

Add Related Post Widget to Blogger

Last Updated On: February 14, 2020Nomzy
Related post widget for blogger

Having a related post widget displayed on your blog’s post page is highly recommended. The related post widget is a must-have for every blogger who’d want to reduce bounce rate and engage users more.

You probably drive traffic from search engines, social media and other sites, once your visitors find what they are looking for, they may leave your blog without visiting another page. This results in inevitable bounce rate on your Google Analytics. Above all, installing related posts widget will surely reduce your bounce rate and increase your page views.

This post will guide you on how to add related post widget with thumbnails just after the end of your blog post. Once this is in place, when your readers finish reading an article, they will see other articles that will likely catch their attention

Pros of Related post Widget

  • Increase page views.
  • Reduces bounce rate.
  • Improve internal linking.
  • Encourage user interaction

How to Add Related Posts Widget in Blogger

Change the default Site Feed setting; Go to Settings > Other, then set ‘Allow Blog Feed to Full’.   In your Blogger Dashboard click on “Template” and backup your template. Once done, click on “Edit HTML” and find this code   </body>    

<b:if cond='data:blog.pageType == &quot;item&quot;'>
.related-posts {
  width: 100%;
  margin: 2em 0;
  float: left;
.related-posts ul li {
  list-style: none;
  margin: 0 5px;
  float: left;
  text-align: center;
<script src='//'/>
$undefineddocument).readyundefinedfunctionundefined) {
    var maxSearched = 500; 
    var minimum = 3; 
    var maximum = 4; 
    var imageSize = 100; 
    var roundImages = true; 
    var relatedTitle = true; 
    var labelInTitle = false;
    var relatedTitleText = "RELATED POSTS"; 
    var defaultImage = ""; 
    var campaignTracking = false; 
    var campaignSource = ""; 
    var campaignMedium = ""; 
    var campaignName = "";
    var postLabels = $('.post-labels a');
    var insertBefore = $('.post-footer'); 
var labels=[];var label;var alternateLabel;var minposts=minimum-1;var postlabels=$undefined".post-labels a");ifundefinedpostlabels.length===1){label=postlabels.textundefined).trimundefined)}else ifundefinedpostlabels.length>1){$undefinedpostlabels).eachundefinedfunctionundefined){labels.pushundefined$undefinedthis).textundefined).trimundefined))});label=labels[Math.floorundefinedlabels.length*Math.randomundefined))];var labelLocation=labels.indexOfundefinedlabel);ifundefinedlabelLocation===labels.length-1){alternateLabel=labels[labelLocation-1]}else{alternateLabel=labels[labelLocation 1]}}ifundefinedlabel!==undefined){var title=$undefined".entry-title").textundefined).trimundefined);var labelCount=0;var alternateLabelCount=0;var matches=[];var url=$undefined'link[rel="alternate"][title*="Atom"]').equndefined0).attrundefined"href");$.ajaxundefined{url:url,data:{"max-results":maxSearched,alt:"json-in-script"},dataType:"jsonp",success:functionundefinede){$.eachundefinede.feed.entry,functionundefinedt,n){ifundefinede.feed.entry[t].category!==undefined){var r=[];forundefinedvar i=0;i<e.feed.entry[t].category.length;i  ){r.pushundefinede.feed.entry[t].category[i].term)}ifundefined$.inArrayundefinedlabel,r)!==-1){labelCount  }ifundefined$.inArrayundefinedalternateLabel,r)!==-1){alternateLabelCount  }}});ifundefinedlabelCount<=minposts&&alternateLabelCount>=minposts){label=alternateLabel}$.eachundefinede.feed.entry,functionundefinedt,n){ifundefinede.feed.entry[t].category!==undefined){var r=[];forundefinedvar i=0;i<e.feed.entry[t].category.length;i  ){r.pushundefinede.feed.entry[t].category[i].term)}ifundefined$.inArrayundefinedlabel,r)!==-1){var s=e.feed.entry[t].title.$t.trimundefined);ifundefineds!==title){var o;forundefinedvar u=0;u<e.feed.entry[t].link.length;u  ){ifundefinede.feed.entry[t].link[u].rel==="alternate"){o=e.feed.entry[t].link[u].href}}var a;ifundefinede.feed.entry[t].media$thumbnail!==undefined){a=e.feed.entry[t].media$thumbnail.url.splitundefined/s72-c/).joinundefined"s" imageSize "-c")}else{a=defaultImage}ifundefinedmatches.length<maxSearched&&campaignTracking===false){matches.pushundefined'<li><a href="' o '"><img src="' a '" alt="' s '" nopin="nopin">' s "</a></li>")}else ifundefinedmatches.length<maxSearched&&campaignTracking===true){matches.pushundefined'<li><a href="' o "?utm_source=" campaignSource "&utm_medium=" campaignMedium "&utm_campaign=" campaignName '"><img src="' a '" alt="' s '" nopin="nopin">' s "</a></li>")}}}}});ifundefinedmatches.length>=minimum){ifundefinedrelatedTitle===true&&labelInTitle===true){insertBefore.beforeundefined'<div class="related-posts"><h5>' relatedTitleText ' <span class="related-term">' label "</span></h5><ul></ul></div>")}else ifundefinedrelatedTitle===true&&labelInTitle===false){insertBefore.beforeundefined'<div class="related-posts"><h5>' relatedTitleText "</h5><ul></ul></div>")}else{insertBefore.beforeundefined'<div class="related-posts"><ul></ul></div>')}matches.sortundefinedfunctionundefined){return.5-Math.randomundefined)});forundefinedvar t=0;t<maximum;t  ){$undefined".related-posts ul").appendundefinedmatches[t])}}insertBefore.cssundefined"clear","both");$undefined".related-posts ul li").cssundefined"max-width",imageSize);$undefined".related-posts ul li img").cssundefined{"max-width":imageSize,height:imageSize});ifundefinedroundImages===true){$undefined".related-posts ul li img").cssundefined"border-radius","50%")}}})}

Editing the gallery options in the “Code Options” section of the code.

The code options section is between “//CODE OPTIONS and “//END CODE OPTIONS”

Guide to editing Code below:

    var maxSearched = 500; 
    var minimum = <minimum posts>; 
    var maximum = <maximum posts; 
    var imageSize = <image size>; 
    var roundImages = <rounded image 'true or false'>; 
    var relatedTitle = <Widget title 'true or false'>; 
    var labelInTitle = <Add label to widget title 'true or false'>;
    var relatedTitleText = "<Text to display as Title>"; 
    var defaultImage = <"add default image here for posts without image">; 
    var campaignTracking = false; 
    var campaignSource = ""; 
    var campaignMedium = ""; 
    var campaignName = ""; 
    var postLabels = $('.post-labels a');
    var insertBefore = $('.post-footer'); 

Edit the above carefully so you don’t delete the semicolon if you update any ‘option.’ After you update the options, press the “preview template” button to check for errors before saving.

Did you enjoy this article?

Don't miss out on our new content. Sign Up!

Prev Post

PayPal Alternative for Bloggers and internet Marketers

September 6, 2016

Next Post

How to Start A Self-Hosted WordPress Blog With Detailed Guide

October 29, 2016

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get my FREE eBook on starting a Lifestyle Blog

Earn an income by doing something you love

You have Successfully Subscribed!