Add Related Posts Widget To Blogger

Add Related Posts Widget To Blogger

Last Updated On: November 6, 2017
Related posts for blogger
Having a related posts widget displayed in your blog’s post page below every article is highly recommended. The related post widget is a must have for every blogger hoping to grow bigger with blogger. 
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 to 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 article will guide you on how to add related posts widget with thumbnails just below your blog post body, so that when your readers finish reading an article they are interested in, they may sight other articles that are related to their interest, 
Pros of Related post Widget
• It will increase page views.
• It reduces bounce rate.
• It will improve internal linking.
• It will improve 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’.
1. In your Blogger Dashboard click on Template and backup your template. Once done, click on Edit HTML and find this code 
<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%")}}})}

Editingthe 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'); //END CODE OPTIONS

 Edit the above carefully so you don’t delete the semicolon if you update an option. After you update an option, 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

Guides To Being A Good Personal Blogger

September 22, 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!