Add Related Posts Widget With Thumbnails to Blogger

Displaying related posts is a smart way for keeping your site visitors around and with thumbnails it is even smarter!This widgets is one of most popular way to increase to show related post to blogger.After you will add this widget it will start above comment section.The related articles are chosen from other posts in that same category/label/tag.Related post widget help you to show visitor your past and previous stories.It also help to increase page and make readers engaged on reading your blog post.

Features

• Responsive Design
• Fast Loading And SEO Friendly.
• Shows Post of  same category/label/tag.
• Blog Post Title with Thumbnail.
• Easy to Install.

Add This Widget To Blogger

• Go To Blogger Dashboard
• Click On Template Tab
• Now Click On Edit HTML>>Proceed.
• Check the "Expand widgets template"
• Now Find ]]></b:skin>
• Paste Below Code Above ]]></b:skin>

#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;
}

• Now Find </head> And Paste Below Code Above it

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCShT3-K-g2HxcbF2TPjjaeQw4NIpwM7QrVpOYvjlquRZivtG4-54CHn2SxuajcnB1UsJFxMrSLsp9PtD5VShZtVjlV2MAmwoBl5e7Vp1TGn8aFv4o1wKw7VHANULYqYnHpNq9gUwMjeST/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>
</b:if>

• Now Find  <div class='post-footer'>
• And just above it, copy and paste the below code

<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://lordhtml.blogspot.com'></a>
</b:if></b:if>

Finally After Adding Lot of code just click on Save Template button and preview this widget on your blog. 

customization

There is not lot of customization in this widget.If you want to manage no. of post display as related post in your blog then customize red color highlighted code.