Related Posts - Blogger

LOADING ... Getting tired of adding related posts list manually all the time? For Blogger users, with a little bit of template modification, the related posts list can be added automatically based on the label assigned to the posts.

Interested? Just follow two steps procedure below to add it to your blog.


Step 1
Go to Template > Edit HTML, click the Expand Widget Template checkbox, and paste the following into the page header:

<!-- START: Related Posts -->
<script type='text/javascript'>//<!--
var relTitle = new Array();
var relURL = new Array();

function resetRelatedPosts() {
  relTitle = new Array();
  relURL = new Array(); } //end function

function getRelatedPosts(json) {
  var j = 0; 
  for (var i = 0; i < json.feed.entry.length; i++) { 
    var entry = json.feed.entry[i]; 
    relTitle[j] = entry.title.$t; 
    for (var k = 0; k < entry.link.length; k++){  
      if (entry.link[k].rel == 'alternate'){
        relURL[j] = entry.link[k].href;   
        j++;   
        break; } } } } //end function

function writeRelatedPosts() { 
  var uniqURL = new Array(0); 
  var uniqTitle = new Array(0);
  for(var i = 0; i < relURL.length; i++){
    if(!contains(uniqURL, relURL[i])){
      uniqURL.length += 1;
      uniqURL[uniqURL.length - 1] = relURL[i];
      uniqTitle.length += 1;
      uniqTitle[uniqTitle.length - 1] = relTitle[i]; } }
  relURL = uniqURL;
  relTitle = uniqTitle;

  var flagBlank = true;
  var content = '<br/><br/><b>Related Posts</b><ul>';
  for(var j = 0; j < relTitle.length; j++){
    if (relTitle[j] != currentTitle){
      content += '<li><a href="' + relURL[j] + '">' + relTitle[j] + '</a></li>';
      flagBlank = false; } }
  content += '</ul>';
  if (!flagBlank){
    document.write( content ); } } //end function

function contains(a, e){
  for(var k = 0; k < a.length; k++) if (a[k]==e) return true; return false; } //end function
//--></script>
<!-- END: Related Posts -->

Step 2
Scroll down to find the following:

<data:post.body/>

Then add the following immediately after above tag:

<!-- START: Related Posts -->
<script type='text/javascript'> resetRelatedPosts(); </script>
<b:loop values='data:post.labels' var='label'>
  <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=getRelatedPosts&max-results=10"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'> var currentTitle = '<data:post.title/>'; writeRelatedPosts(); </script>
<!-- END: Related Posts -->

That's all. You just added "Related Posts" at the bottom of your posts.

Note that the current post is not added to the related posts list. You'll need at least two posts with the same label to make the related post appears.


Tweak
You may adjust how many related posts to display for each label. The default is 10 posts per label (see the part that says max-results=10), but you can increase or decrease this value or remove the restriction altogether (which will show all related posts for each label).


Requirement
This feature will only work if :

• Your blog is parked at Blogger.
  
• You are using label for your posts.
  
• The blog feed is active.
  

To activate the blog feed:
Settings > Site Feed, set Allow Blog Feed to Full.