How To Add Related Posts Widget For Blogger Blogspot

It's nice sharing with you this smart looking related blogger post widget. This widget is has been around for quite sometimes now. Knowing too well that you might have come across this widget either on Blogger or Wordpress platform but it happened that you don't really know the useful of it. The usefulness of this blogger related posts widget is undeniably, due to the fact that it helps in keeping your blog's visitors stay for a longer time than usual, which in-turn decreases the blog's bounce rate and consequently boost your page-views day-by-day. This widget is so important for we bloggers, and it's not difficult to add to our blog.

How To Install This Widget On Your Blog?

1. Go to Blogger Dashboard => Template => Edit HTML

2. Click "Format Template" (this option expands the template)

 

3. Click anyway inside the blogger template Editor and press Ctrl F and type <data:post.body/> in the search box provided and hit enter button in your computer.

4. Paste the below code immediately after <data:post.body/>

 <!--related post started-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>
<div class='widget-content'>
<h2>Related post</h2>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 5;
var maxNumberOfLabels = 3;
maxNumberOfPostsPerLabel = 5;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
<!--BlogStable.com-->
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
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 = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>
<!--related post end-->

You can also add some customization to these blogger posts related widget.

• To add the numbers of post displayed, change the value of maxNumberOfLabels =3,
• To add more labels, change the value of maxNumberOfPostsPerLabel =5;

5. Click on the Save Template button just at the top left of the blogger template Editor.

6. That's all.

If you have any difficulties in adding these blogger related post widget to your blog, kindly post your query via comment.
If you find these tutorial a bit useful consider sharing to your friends on social media sites like, facebook, twitter, stumbleupon and digg.
You don't want to miss our future posts? Subscribe below for our daily updates! Happy blogging.

Related Posts: