Related Posts Widget With Summary For Blogger

Adding Related Posts widget to your blog helps to improve your blog'a SEO. This is a great way to keep visitors much longer on your blog by showing them posts that are related to the current post they are reading. To add this feature to your blogger blog is very easy, so in this tutorial I will show you how to add related posts widget with summary to your blogger blog.

Follow the instructions below

* Login to your blogger dashboard and select Template/Theme
* Click Edit HTML
* Search for </head> and place the below script immediately above it

<script type='text/javascript'>

//<![CDATA[
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedpSummary = new Array();
var relatedThumb = new Array();
var relatedTitlesNum = 0;
var relatedPostsNum = 4; // number of entries to be
shown
var relatedmaxnum = 75; // the number of characters of
summary
var relatednoimage = "http://3.bp.blogspot.com/-
PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/
s1600/no_image.jpg "; // default picture for entries with
no image
function readpostlabels(json) {
  var entry, postimg, postcontent, cat;
  for (var i = 0; i < json.feed.entry.length; i++) {
    entry = json.feed.entry[i];
    if (i==json.feed.entry.length) { break; }
    relatedTitles[relatedTitlesNum] = entry.title.$t;
    postcontent = "";
    if ("content" in entry) {
      postcontent = entry.content.$t;
    } else if ("summary" in entry) {
      postcontent = entry.summary.$t;
    }
    relatedpSummary[relatedTitlesNum] = removetags
(postcontent,relatedmaxnum);
    if ("media$thumbnail" in entry) {
      postimg = entry.media$thumbnail.url;
    } else {
      postimg = relatednoimage;
    }
    relatedThumb[relatedTitlesNum] = postimg;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        relatedUrls[relatedTitlesNum] = entry.link[k].href;
        break;
      }
    }
    relatedTitlesNum++;
  }
}
function showrelated() {
  var tmp = new Array(0);
  var tmp2 = new Array(0);
  var tmp3 = new Array(0);
  var tmp4 = 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];
      tmp3.length += 1; tmp3[tmp3.length - 1] =
relatedpSummary[i];
      tmp4.length += 1; tmp4[tmp4.length - 1] =
relatedThumb[i];
    }
  }
  relatedTitles = tmp2; relatedUrls = tmp;
relatedpSummary = tmp3; relatedThumb = tmp4;
  for(var i = 0; i < relatedTitles.length; i++){
    var index = Math.floor((relatedTitles.length - 1) *
Math.random());
    var tempTitle = relatedTitles[i]; var tempUrls =
relatedUrls[i];
    var tempResum = relatedpSummary[i]; var tempImage
= relatedThumb[i];
    relatedTitles[i] = relatedTitles[index]; relatedUrls[i] =
relatedUrls[index];
    relatedpSummary[i] = relatedpSummary[index];
relatedThumb[i] = relatedThumb[index];
    relatedTitles[index] = tempTitle; relatedUrls[index] =
tempUrls;
    relatedpSummary[index] = tempResum; relatedThumb
[index] = tempImage;
  }
  var somePosts = 0;
  var r = Math.floor((relatedTitles.length - 1) *
Math.random());
  var relsump = r;
  var output;
  var dirURL = document.URL;
  while (somePosts < relatedPostsNum) {
    if (relatedUrls[r] != dirURL) {
      output = "<div class='relatedsumposts'>";
      output += "<a href='" + relatedUrls[r] + "'
rel='nofollow'  target='_self' title='" + relatedTitles[r] +
"'><img src='" + relatedThumb[r] + "' /></a>";
      output += "<h6><a href='" + relatedUrls[r] + "'
target='_self'>" + relatedTitles[r] + "</a></h6>";
      output += "<p>" + relatedpSummary[r] + " ... </p>";
      output += "</div>";
      document.write(output);
      somePosts++;
      if (somePosts == relatedPostsNum) { break; }
    }
    if (r < relatedTitles.length - 1) {
      r++;
    } else {
      r = 0;
    }
    if(r==relsump) { break; }
  }
}
function removetags(text,length){
  var pSummary = text.split("<");
  for(var i=0;i<pSummary.length;i++){
    if(pSummary[i].indexOf(">")!=-1){
      pSummary[i] = pSummary[i].substring(pSummary
[i].indexOf(">")+1,pSummary[i].length);
    }
  }
  pSummary = pSummary.join("");
  pSummary = pSummary.substring(0,length-1);
  return pSummary;
}
function contains(a, e) {
  for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
  return false;
}
//]]>
</script>

To display more related posts, change the highlighted value (4)
To change the number of characters to show up in the related posts summary, change the highlighted value (75)
You can also change the image URL to your own by replacing the highlighted image URL in the code.

Now let's continue

* Search for the below code on in your template box

<a expr:href='data:label.url' rel='tag'><data:label.name/
></a><b:if cond='data:label.isLast !=
&quot;true&quot;'>,</b:if>

* Paste the below code immediately After it

<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=readpostlabels&amp;max-
results=50&quot;' type='text/javascript'/>
  </b:if>

* Search for this code

</b:includable>
                <b:includable id='postQuickEdit' var='post'>

* Place the below code immediately Above it

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='post-footer-line post-footer-line-4'>
    <div id='relatedpostssum'><div style='text-align: left;
font-size: 15px; margin-bottom: 10px; font-weight:
bold;'> RELATED POSTS</div>
<script type='text/javascript'>showrelated();</script>
</div>
<div style='clear:both;'/>
</div>
</b:if>

* Also search for ]]></b:skin> and place the below code Above it

<relatedsumposts {
  float: left;
  margin: 0px 5px;
  overflow: hidden;
  text-align: center;
  /* width and height of the related posts area */
width: 120px;
height: 210px;
}
.relatedsumposts:hover {
background-color: #F3F3F3; -webkit-border-radius:
10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.relatedsumposts img:hover {
-khtml-opacity:0.4;
-moz-opacity:0.4;
opacity:0.4;
}
.relatedsumposts a {
  /* link properties */
color: #linkcolor;
display: inline;
font-size: 10px;
line-height: 1;
}
.relatedsumposts img {
  /* thumbnail properties */
margin-top: 2px;
height: 82px;
padding: 5px;
width: 82px;
border: 1px solid #fff;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.relatedsumposts h6 {
  /* title properties */
  display: table-cell;
  height: 5em;
  margin: 5px 0 0;
  overflow: hidden;
  padding-bottom: 2px;
  vertical-align: middle;
  width: 130px;
}
.relatedsumposts p {
  /* summary properties */
border-top: 1px dotted #777777;
border-bottom: 1px dotted #777777;
color: #summarycolor;
font-size: 10px;
height: 4em;
line-height: 1;
margin: 5px 0 0;
overflow: hidden;
padding: 5px 0 15px 0;
text-align: left;
}

* Finally, click Save Template
That's all. I hope you enjoyed this tutorial, please subscribe to our newsletter to get latest updates from this blog.