Saturday, July 22, 2017
728x90 V3

How to add related posts widget to Blogger

You blog is great but without related posts widget it’s nothing, every good blog has this widget. In this tutorial i will show you how to add maybe the best related posts widget for Blogger, it’s very simple and easy, you just need to follow me step by step!

Edit HTML

First you need to go to your Blogger Dashboard and go to Template and click Edit HTML like in the picture below.

tut 1

Find </head>

Now when you’re in the HTML document of the site just click anywhere in the document and hit CTRL+F, in the search box type tag </head> and hit ENTER.

tut 2

First code

Just above the </head> line paste a code below, watchout it MUST be above the </head> line!

<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>
Customization
– If you want to change the default image when there’s no picture to show, just replace the pink text from the code above.
– If you want to change the excerpt of the related post just change the orange 75 line.
– If you want to change the number of the related posts to show just change the red 4 line.

Second code

Now we will put another code, first in HTML document search for the code below using CTRL+F:
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a><b:if cond=’data:label.isLast != &quot;true&quot;’>,</b:if>
Just after that code paste a code below:
<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>

Third code

Now find the following code:
</b:includable>
<b:includable id=’postQuickEdit’ var=’post’>
Then copy and paste below code just above/before 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>
Customization
– If you want to change text from ‘Related Posts’ to another, just change bolded text from the code above.

Fourth code

This is the last code you’ll need to put in your code for related posts widget, it’s about CSS style so it’s very important. First search for line  ]]></b:skin>(use CTRL+F command). Just above that line add the code from below:
<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;
}
Customization
– To change heigh and width of your related posts widget just change the blue values the from code above( width: 120px;  height: 210px; ).
– To change the link color replace #linkcolor with hex color code you want, ex. #FFFFFF. This is the color of post title in your widget.
– To change the size of thumbnails just change the pink values from the code (  height: 82px;  width: 82px; ).
– To change the border roundness, change the green values ( -webkit-border-radius: 100px; )
– To change the color of the post snippet change purple #summarycolor code with hex color code that you want.

Preview and save

Now preview your new related posts widget and save your file, enjoy in your new widget and share this tutorial, we hope that this tutorial was helpful for you!
Capture

About Dimitrije Zivadinovic (Di)

Dimitrije Zivadinovic (Di)
Hey there, I'm Dimitrije Zivadinovic and this is my blog! I am a blogger, and.. No i am just a blogger, i know something about blogging platforms and i wanted to share my knowledge with you. If you have anything to ask me, feel free to hit me up via social media or leave a comment down bellow!

Check Also

Add a CSS Animated Share Button on Blogger

Social Medias are very important for SEO so it’s better for you to have a ...

Leave a Reply

Your email address will not be published. Required fields are marked *