Related Posts Widget with thumbnails for Blogger

Now Like wise Wordpress Blogger Users can also have Related Posts with Thumbnails in Blogspot Blogs.To increase page views per user this widget can be very helpful, you can easily display the Related Posts with thumbnails below every post or below the post area with very ease.

Related Posts Widget with Thumbnails for Blogger

Here are the detailed steps to install the related posts widget for blogger with thumbnails

STEP #1

Log in to Blogger -> Layout -> Edit HTMLand select the tick-boxExpand Widget Templates
Then, find (CTRL+F) this code in the template:

And immediately before it, paste this code:

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPQjthnlGM9oZOVkavx8SA11hsHSQDBAU2ZWVuVjBHMy08Oq-jsAxuSetGEbd3eLYiNLQQLd8Qr6esNJmM9KB3AcTVYw52fnfWkOhJ_GNEQOpFU4DtfF2A6DwhVXrm65X0sExwSEthCQdL/s1600/no+Image+1.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
script>
<script src='https://sites.google.com/site/bdlab12/javascript123/bdlab-related-posts-with-thumbnails-for-blogger-pro.txt' type='text/javascript'/>
b:if>

STEP #2:
Now find this code in the template:

If you cant find it then try finding this one

Now immediately after any of these lines(whichever you could find) place this code snippet

<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>