How to Add Related Post Widget For Blogger Below Every Post

Adding Related post widget with thumbnails below/under every post you published in your blog is a good widget all bloggers ought to have on their blog because it help to increase page views & readership while your blog traffic low rate will decrease gradually.

As a blogger or someone that have blog, I will advise you strongly to add Related Post Widget below every post you published. Today, I want to share with you how I added related post widget with thumbnails below/under every post i published in my blog.

How can I add Related Posts Widget with Thumbnails to my blog?

Follow the steps below

Step 1: Log in to your Blogger Dashboard >> Navigate to Template >> Click Edit Html >> Click Anywhere inside html box.

From your keyboard, use (CTRL+F) to find </head> in your templates.

Step 2: Paste the code below before the closing </head> tag.

<style>
#related-posts {
float : left;
width : 300px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6q2z7gUZIxGKz7SnbSuJEml6dRT4nqIESfr_sBc-tgSzLTNUMdGXD1M8CTe07mDxZfbcFKI2KGgbwzownHAZZWhs87cutq6q2OZoF3NnRGVJYYi54R2tXs06ahVqT2DDSqqONODZvuao/s200/greentickbullet.png") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style>

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = 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];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
document.write('<a href="http://www.emmyworldwide.com/2015/07/how-to-add-related-post-widget-for.html" target="_blank" rel="nofollow"><font size="1" color="black">[Get Related Posts Widget for Your Blog]</font></a>');
}
//]]>

</script>

Step 3: Now find again (i.e use CTRL+F), any of this code below in your template HTML:

Now before any of these codes (whichever you could find) above, place the code snippet below just before it

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts: </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><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=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Step 4: Widget Configuration

1. If you want to change the total number of posts to display in your blog posts, Edit the following line of code. Carefully find this html code below in Step 2 above.

var maxresults=5;

Replace the 5with any number of post you wish to be displayed

2. Also to Edit the title of the widget, change the following line of code below.

var relatedpoststitle="Related Posts";

To caption name of your choice.

Step 5: Now Click Save template to Save your template.

That’s all.

Note: The above trick is something you will do once and each time you publish your post, Related Post will automatically show/display at the end of that post you published. Follow the trick well; it will work for you because it worked for me, as you can see it below this post.

If you which to display the related post via mobile preview, read How To Configure Related Posts Widget To Show On Blogger Mobile View.

I hope you like this post.

Kindly use the share buttons, Like and send button to share and send this post to your friend. They will surely appreciate it.