How To Add A Related Post Widget

There are some advantages by adding related post widget in our blog; the readers will be able to find the articles that relate to the article they reading and it also gives an advantage for the blow owner because the readers can stay in the blog longer.

If you are interested in adding that widget, just read the guide below;

1. Log in into blogger with your ID
2. Click Layout
3. Click EDIT HTML tab
4. Click Download Full template. Please back up your template first
5. Please download the script first
   
   
   
   

   <b:if cond='data:blog.pageType == "item"'>
   <div class='similiar'>
   
   <div class='widget-content'>
   <h3>Related Posts :</h3>
   <div id='data2007'/><br/><br/>
   <script type='text/javascript'>
   
   var homeUrl3 = "<data:blog.homepageUrl/>";
   var maxNumberOfPostsPerLabel = 4;
   var maxNumberOfLabels = 10;
   
   maxNumberOfPostsPerLabel = 100;
   maxNumberOfLabels = 3;
   
   
   function listEntries10(json) {
   var ul = document.createElement('ul');
   var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
   json.feed.entry.length : maxNumberOfPostsPerLabel;
   for (var i = 0; i < maxPosts; i++) {
   var entry = json.feed.entry[i];
   var alturl;
   
   for (var k = 0; k < entry.link.length; k++) {
   if (entry.link[k].rel == 'alternate') {
   alturl = entry.link[k].href;
   break;
   }
   }
   var li = document.createElement('li');
   var a = document.createElement('a');
   a.href = alturl;
   
   if(a.href!=location.href) {
   var txt = document.createTextNode(entry.title.$t);
   a.appendChild(txt);
   li.appendChild(a);
   ul.appendChild(li);
   }
   }
   for (var l = 0; l < json.feed.link.length; l++) {
   if (json.feed.link[l].rel == 'alternate') {
   var raw = json.feed.link[l].href;
   var label = raw.substr(homeUrl3.length+13);
   var k;
   for (k=0; k<20; k++) label = label.replace("%20", " ");
   var txt = document.createTextNode(label);
   var h = document.createElement('b');
   h.appendChild(txt);
   var div1 = document.createElement('div');
   div1.appendChild(h);
   div1.appendChild(ul);
   document.getElementById('data2007').appendChild(div1);
   }
   }
   }
   function search10(query, label) {
   
   var script = document.createElement('script');
   script.setAttribute('src', query + 'feeds/posts/default/-/'
   + label +
   '?alt=json-in-script&callback=listEntries10');
   script.setAttribute('type', 'text/javascript');
   document.documentElement.firstChild.appendChild(script);
   }
   
   var labelArray = new Array();
   var numLabel = 0;
   
   <b:loop values='data:posts' var='post'>
   <b:loop values='data:post.labels' var='label'>
   textLabel = "<data:label.name/>";
   
   var test = 0;
   for (var i = 0; i < labelArray.length; i++)
   if (labelArray[i] == textLabel) test = 1;
   if (test == 0) {
   labelArray.push(textLabel);
   var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
   labelArray.length : maxNumberOfLabels;
   if (numLabel < maxLabels) {
   search10(homeUrl3, textLabel);
   numLabel++;
   }
   }
   </b:loop>
   </b:loop>
   </script>
   </div>
   </div>
   </b:if>
   

   
   
6. Give a mark next to Expand Widget Templates and wait for a few seconds until the process is over.
   
   
   
   
   
   
7.  Find the code below
   
   

   </data:post.body>

   
   
8. Copy and paste the script you have downloaded right under the code
   </data:post.body>
   
9. Click SAVE TEMPLATE
10. Finish and check the result  

In order to change the number of maximum related posts being displayed for each label, search for the code

maxNumberOfPostsPerLabel = 100;

and change the number "100" to any desired number.