How to Add Related Posts Widget with Thumbnails to Blogger

Related posts widget automatically shows some related topic posts under every post and get the attention of readers/visitors on it. Finally increase the pageviews.
Now days almost every third party’s premium/free blogger templates have this widget by default. But if you are a using a template from your template option that is provided by Google (blogger) you will miss the advantage of this feature.
And there is also some third party templates too that don't have related posts widget built in for various purpose like, blog loading speed measure.





 Don't forget to backup your template b4 proceed to any kind of editing


Step 1: Login to your blogger account, select your blog (if you have multiple), then click on Template from blogger main menu.

Step 2: Now click on Edit HTML.
         
Step 3: Search for </head>  tag in template editor by pressing Ctrl+F.

Step 4: Now copy and paste the below code just above it </head>

  <!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #f2f2f2;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;}
#related-title {color:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://makingdifferent.github.io/blogger-widgets/related_posts_widget.js' />
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

STEP : 5  - Find the following code in your blog's HTML using CTRL + F, you might get the result of the same code two times then you can stop at the second one.

<div class='post-footer'>

STEP : 6 - Now, just above it, copy and paste below code.

 <!-- Related Posts with Thumbnails Code Start-->
<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>
<b:if cond='data:blog.pageType == "item"'>
<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:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="<b>Related Posts:</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerwidgetgenerators.com'><img alt='Blogger Widgets' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwN4UEqABadjY2WV_KtkKhu1Y-TP3zqwmx7hCS4HfGlC_Ipyh6k07a0fEEIg789vQPsbmSyuGqCV_dHO5jVy_TI23BcTDT1TCeBMr9yMNEBsbsuzSQ2k7nnpaGC5s3HwU76w3y2qjDeQu9/s1600/best+blogger+tips.png'/></a>
</b:if>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Edit value 5 in maxresults=5 with the number of posts you want to be display.