How to Add Related Post Widget with Thumbnails Below Every Post on Blogger

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.

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 in your templates </head>

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

<style>
#related-posts {
float : left;
width : 350px;
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.entertaintechnews.com/2015/12/how-to-add-related-post-widget-with.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 in your template:

<div class='post-footer'>

Now Before any of these lines (whichever you could find) place the code snippet below

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="<b>Related Posts:</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style="font-size: 9px;float: right; margin: 5px;"><a style="font-size: 9px; text-decoration: none;" href="http://www.entertaintechnews.com/2015/12/how-to-add-related-post-widget-with.html" rel="nofollow" >Related Posts Widget</a></div>
</b:if>

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;

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

var relatedpoststitle="Related Posts";

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.

Update! If you are unable to see the related posts widget after saving the template, add the code (step 5) just above the </b:includable> tag which can be found above this line (CTRL + F to find it): <b:includable id='postQuickEdit' var='post'>

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.