How to Add Related Posts Widget to Blogspot Website, Desktop + Mobile View Related Posts [Tutorial]

A related posts widget is important in every blog, and why is that?

what is related posts?

Related posts widget is a widget shown below every blog posts, it is the collection of posts that relate to the post the a blog visitor is reading.

The related post widget in the mobile version of your blogger blog can increase your blog's page views especially if a higher number of visitor/readers access your blog from their phone. Since this blogger widget displays related posts without the images, it does not affect page load time of your blog. It can also reduce your blog's bounce rate because there is interlinking of one post to other and your visitors don't leave immediately without checking out any other post on your blog.

now let's follow this steps.

HOW TO ADD RELATED POSTS WIDGET WITHOUT THUMBNAIL

Step 1

From your blogger dashboard,

Go to Template.

Make sure you backup your template

Make sure you change your blog's mobile view from Default to Custom, to do that click here, don't worry it will open in a new tab.

Step 2

click on Edit Html

press ctrl + F, in that search box that appears, 

type: </head> and enter

right above </head> copy and paste the below code:

Copy This

• <!--Related Posts Scripts and Styles Start-->
  <style>
  #related-posts {
  float : left;
  width : 350px;
  margin-top:20px;
  margin-left : 5px;
  margin-bottom:20px;
  font : 11px Verdana;
  margin-bottom:10px;
  }
  #related-posts .widget {
  list-style-type : none;
  margin : 5px 0 5px 0;
  padding : 0;
  }
  #related-posts .widget h2, #related-posts h2 {
  font-size : 20px;
  font-weight : normal;
  margin : 5px 7px 0;
  padding : 0 0 5px;
  }
  #related-posts a {
  text-decoration : none;
  }
  #related-posts a:hover {
  text-decoration : none;
  }
  #related-posts ul {
  border : medium none;
  margin : 10px;
  padding : 0;
  }
  #related-posts ul li {
  display : block;
  background : url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAKSuHLBIwtOIkzotpNozLKSwmAeSl_MXFyqbcr2sa_f-oVcFKBfnfGHVTWwRljsXi3WumKUTJynlJHChaWI1m7qJj38a31HL_ZkAl7U6szNebr0VKknzIJfpgYJJ83bdhoW9-1RZlrYs/s200/greentickbullet.png&quot;) no-repeat 0 0;
  margin : 0;
  padding-top : 0;
  padding-right : 0;
  padding-bottom : 1px;
  padding-left : 21px;
  margin-bottom : 5px;
  line-height : 2em;
  border-bottom:1px dotted #cccccc;
  }
  </style>
  
  <script type='text/javascript'>
  //<![CDATA[
  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() {
  var r = Math.floor((relatedTitles.length - 1) * Math.random());
  var i = 0;
  document.write('<ul>');
  while (i < relatedTitles.length && i < 20) {
  document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
  if (r < relatedTitles.length - 1) {
  r++;
  } else {
  r = 0;
  }
  i++;
  }
  document.write('</ul>');
  document.write('<a href="http://www.gurusblend.com/2016/12/how-to-add-related-posts-widget-to.html" target="_blank" rel="dofollow"><font size="1" color="black">[Get This Related Posts Widget]</font></a>');
  }
  //]]>
  
  </script> 
  
  <!--Related Posts Scripts and Styles End-->

Step 3

in your template, press ctrl + F and search for:

Copy This

• <div class='post-footer-line post-footer-line-1'> 

or search for this:

Copy This

• <p class='post-footer-line post-footer-line-1'>

Copy the code below and paste below any of the lines of code above which you could find in your template:

Copy This

• <!-- Related Posts with Thumbnails Code Start-->
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div id='related-posts'>
  <font face='Arial' size='3'><b>Related Posts: </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
  <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
  <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
  </script>
  </div>
  </b:if>
  <!-- Related Posts with Thumbnails Code End-->

Now save your template, and view your blog, you now have a related posts widget in your blog..
hope it helps? drop your comment..

written and composed by
Owoeye Tolu
CEO gurusblend