Related Posts Widget for Blogger/Blogspot with Images

Related posts Widget will probably produce list of related posts. This specific Widget can be added often in homepage (under every single posts) or perhaps inside the post. By putting this specific related posts Widget, there is possible opportunity to distribute the other articles to visitors and they also may well will usually get that post in the listing, it will reduce the inflatable bounce rate of one's blog all of which will keep your visitors by suddenly stop from the blog. I will tell you how to add related posts widget to your Blogger.

How to add Related Posts Widget to Blogger

Step 1. Log in to your Blogger Dashboard, then go to Template and click Edit HTML.
Step 2. Find below text from search (Ctrl + F)

]]></b:skin>

Step 3. Copy and paste the given code above this line.

<!--Blogger Tricks Related Posts with thumbnails Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'> /* remove this */
<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaPgtvyKucO-VDtfZ4mfq6dLkpWVJ1EX3f3oaKQPEynpbrZv7IfaSUOFqoqCiocW-e_K4mlY1C6-2-ANHCOMGpvnbkSSFnyblq1nT8nIrRn7Tn7BvK1C342fZ1-mLF9P5-CP_-s8RGmd0/s400/noimage.png";
var maxresults=5;
var splittercolor="#DDDDDD";
var relatedpoststitle="Related Posts";
</script><a href="http://www.tonyisright.blogspot.com/" style="font-size:0pt">Blogger Tricks</a>
<script src='http://netoopscodes.googlecode.com/svn/netoops-related-posts-with-thumbnails-blogger.js' type='text/javascript'/>
</b:if> /* remove this */
<!--Blogger Tricks Related Posts with thumbnails End-->

Change the red value to show number of posts.
Change the green color to change color of splitter line between posts.
Change the blue color to change Name of title.

Step 4. Find below text from search (Ctrl + F)

<div class='post-footer'>

Step 5.  Copy and paste the below code above this line.

<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'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://tonyisright.blogspot.com/2014/05/related-posts-widget-for.html' style="font-size:20%">Related Posts Widget</a></b:if></b:if>

Change red color to change number of posts displayed in widget.