Related Post Widget in Blogger [Tutorial]

If you are on WordPress then you can add related or similar post in your blog easily because there are a lot of plugins are available for this purpose. Even you can also add related post with thumbnail easily.
But if you are on Blogger then it is not so easy to add related post widget because you can not use plugins in Blogger and you have to add code manually.
What is the basic requirements to show related posts below an article
Related posts is a must have widget which is added below article and there are following main reasons to add this widget;
  • Internal Linking
Linking of similar content is a good SEO practice and related posts play a very important in this operation. It helps Googlebot to crawl related content.
  • Bounce Rate
Related post widget is the main key to decrease website bounce rate and it helps visitors in finding similar articles or article related to similar categories

Easiest way to add Related Post widget in Blogger

First of all login to your Blogger account and go to the “design option”
In design option go to the “HTML editor
Now use the Internet browser “Find” option and locate the following live of code 
 


<data:post.body/>


Now you have to paste the following code just below the above given line;


<!--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);
}
}
<!--Bloggertrix.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—>




Save the template and you will observe related post with related tag ( categories)

Related Posts with Thumbnail

There are three plug and play ways are available with which you can show related posts with thumbnail and you will love both these easy to use plugins for Blogger

Dhiti

dhiti-dive

Dhiti Live is an amazing way to show related posts with thumbnail and also related tags to browse. Dhiti Live is one of the most effective way to show related content on Blogger and WordPress. For Blogger you have to add just a gadget and for WordPress you can use its plugin.

nRelate

nrelate

nRelate is another great way which shows related posts with thumbnail and with different styles. nRelate can also be added as a gadget in Blogger Blog.

Linkwithin

Linkwithin

Linkwitihn is a very popular and easiest way to add related post with thumbnail in Blogger. You have to add just a gadget to add it in your Blogger blog. You can show maximum  4 related posts with thumbnails.