Related Post widget for Blogger with Images and Thumbnails

1.Manually ADD post widget for blogger

1. Log in to your Blogger account

2. Go to Template > Edit HTML

3. Click the box labelled “Expand Widget Template”

4. Search for this:

</head>

5. Paste this code above it:

<!--Related Posts widget for blogger Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<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: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIV9L9aL81Aa18EG7RR1nluTp5UinvIbxyEBDnkuEO-qelgk7EcDr9fqbLrbFtPIq6GU5QYwOVplT-rUvengzk3lZdJrlok6b8E1ltf7zuPLol8IZgc0QTEuosx9U2UCN8fjhUddL33Jey/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='https://avdhootblogger.googlecode.com/files/avdhootblogger.relatedpostwidget.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts widget for blogger End-->

Customizations

If you want to change the default picture in case one of your post does not have any thumbnails then this will appear.so if you want to change the picture then change the URL in RED color.

If you want display more than 5 posts than change the value 5 from 

var maxresults=5;

If you do not want related post widget to appear in homepage also then delete the code in blue color.so your widget will only appear in posts only.

Now find the following code

<div class='post-footer'>

And just above it, copy and paste the below code:

<!-- Related Posts widget for blogger Start-->

<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='related-posts'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != &quot;true&quot;'>

</b:if>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>

<script type='text/javascript'>

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);

</script>

</div><div style='clear:both'/>

<!-- remove --></b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>

<a href='http://www.avdhootblogger.com'><img alt='widgets for blogger' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjUwnzr_p6gngnCjD9K-Ct9EVLVYcp4lwB3wRgfc3bTFx7qkYUM6ylfnE1iIaDtYcnHTHjuhZLIaA-mvsiUUvBOs6ICRYN-G-rrTNSS70sw6vkRrrtTXave6bfKiOaNxaXeACgoNDKAwLq/s1600/best+blogger+tips.png'/></a>

</b:if></b:if>

<!-- Related Posts widget for blogger End-->