Add Related Posts Widget To Blogger | Blogtrovert

Add Related Posts Widget To Blogger

September 21, 2016
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 
</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.

READ:  Create A Self-Hosted WordPress Blog With Domainking

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.

Did you enjoy this article?

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

Prev Post

Auto Read More With Thumbnail For Blogspot Blogs

September 20, 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.

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from us

You have Successfully Subscribed!