Add Related Posts Widget To 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 

</body> 

<!-- BEGIN CODE IT PRETTY RELATED POSTS GALLERY CODE -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    
<style>
.related-posts {
  width: 100%;
  margin: 2em 0;
  float: left;
}
 
.related-posts ul li {
  list-style: none;
  margin: 0 5px;
  float: left;
  text-align: center;
}
</style>
    
    
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script>
 
//<![CDATA[
$undefineddocument).readyundefinedfunctionundefined) {
    
    
    
    //CODE OPTIONS
    
    
    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'); 
    
    
    //END CODE OPTIONS - DO NOT EDIT BELOW THIS LINE
 
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%")}}})}
});
//]]>
</script>
    
</b:if>
<!-- END CODE IT PRETTY RELATED POSTS GALLERY CODE --> 

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:

 //CODE OPTIONS
    
    
    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.