Related Posts Widget With Thumbnail For Blogger

Displaying  related posts at the bottom of each post is a best way to keep to visitor busy and increase your page views.The related posts widget with thumbnails lists a selected number of posts with image thumbnail from each post.

DEMO

How To Add Related Posts With Thumbnail To Blogger

Go to Blogger Dashboard > Design > Edit HTML.
Download a copy of your template first.
Tick  "Expand Widget Templates" checkbox.
Now search for below tag in your template

Code:

</head>

Just above it paste below code

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float: center;
text-transform: none;
height: 100%;
min-height: 100%;
padding-top: 5px;
padding-left: 5px;
font-size
}

#related-posts h2 {
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;
Times New Roman&#8221;, Times, serif; margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}

#related-posts a {
color: black;
}

#related-posts a:hover {
color: black;
}

#related-posts a:hover {
background-color: #6E6E6E;
color: #ffffff;
}
</style>
<script type='text/javascript'> var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5fGUXo-_QitzppTJeyLnGecU2cjaMhMY4na_UQp3Wb9yyJEvkPW6-FXl9cmsk_JZIw_x8XncFD5hwpxTZk3SMpI9SlbtdtKshlezl7yo-SWbvscVzXU6ErZOC_VWKiMXL5XkHFaijxRA/s400/noimage.png&quot;; var maxresults=6; var splittercolor=&quot;#d4eaf2&quot;; var relatedpoststitle=&quot;&quot;; </script>
<script src='http://dtb-blogger.googlecode.com/files/related-posts.js' type='text/javascript'/>
</b:if>

Now search for below code in your template

<div class='post-footer-line post-footer-line-1'/>

Now place below code snippet just before of above line.

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'><h2 style='background-color: nonee; color: #444444; font-family: arial, lucinda, verdana, geneva, sans-serif; font-size: 14pt; font-weight: 400; line-height: 16px; list-style: none; margin: 0px; padding: 0px; text-align: center;'>
<u style='list-style: none; margin: 0px; padding: 0px; text-decoration: initial;'><span style='color: #00aeef; list-style: none; margin: 0px; padding: 0px;'>You may also Download</span></u></h2>

<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=7&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://tutorialduy.blogspot.com/2012/11/related-posts-widget-with-thumbnail-for.html'><img alt='Related Posts Widget For Blogger with Thumbnails' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6kmQneEkcRoLaFsL10kpUqQ-io9qe4QIWtU_ELzvIcUor5o4_xeJc4kIkVCOGb0TnnQdlYsQbW8qOmKyBEK8rp9VVYw2GfFf_yTan1a8nRydAL1br-f1zqUhLiUOVuOBa3x4OZ1tRCArR/s1600/ico.png' style='border: 0'/></a><a href='http://duytemplates.tintucmoivn.com/'><img alt='Blogger Templates' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6kmQneEkcRoLaFsL10kpUqQ-io9qe4QIWtU_ELzvIcUor5o4_xeJc4kIkVCOGb0TnnQdlYsQbW8qOmKyBEK8rp9VVYw2GfFf_yTan1a8nRydAL1br-f1zqUhLiUOVuOBa3x4OZ1tRCArR/s1600/ico.png' style='border: 0'/></a></b:if></b:if>

Now save your template and go to your blog,you will watch this widget just below of your posts.

Customizations
To change the title of widget find the Related Posts in 2nd code.
To change the number of posts to display find this var maxresults=6; code in 2nd code.