How To Add Stylish Related Posts With Thumbnail In Blogger

This tutorial has been already flooded on internet but after a request from my friend, I decided it to post on my blog. The most effective benefit of this widget is that it keeps your blog engaged with visitors. It shows some related posts with the current post. It works in blogger on the 'label' in which post is categorized. Now without wasting time, I am going to deliver the tutorial. Here's how to add related posts widget in blogger.

Steps

1. Log in to Blogger, then go to Template Section Of Your Blog.

2. First make a backup of your template. Then click on Edit HTML.

3. Now, find </head>, you can use Ctrl + F to find it and paste the following code above it.

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

#related-posts img {
height:120px !important;
width:150px !important;
border-bottom:1px solid #ccc;
}
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
margin-top: 10px;
}
#related-posts h2 {
font-size: 18px !important;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
text-shadow: none !important;
color: #5D5D5D !important;
font-family: Arial,sans-serif !important;
margin-bottom: 0.5em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a {
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}

<script type='text/javascript'>
var defaultnoimage=&quot;http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg&quot;;
var maxresults=4;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;You Might Also Like&quot;;
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>
</b:if>

Must Read: Add Responsive Sitemap To Blogger Blog

4. Now, you have to paste below code where you want the widget to appear. If you have add any subscription widget or social sharing widget below the post, then you can add it above or below as your wish. If you have not added any of them then find this <div class=”post-footer”> and paste the code below it.

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

5. Now, save template and done, you have successfully added  the related posts widget in blogger. If you will hard to do it then comment below. I will help you.

Must Read: How To Add Custom Domain To Blogger-With Screenshot