STYLISH RECENT POST WITH THUMBNAILS WIDGET 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.

How To Add Related Posts with Thumbnail to Blogger

STEP 1

• Go to Blogger Dashboard > Design > Edit HTML.
  

STEP 2

• Download a copy of your template first.

STEP 3

• Tick  "Expand Widget Templates" checkbox.

STEP 4

• Now search for below tag in your template

STEP 5 - Code

</head>

Just above it pastes 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/AVvXsEj8kmr_clo9JJeHPSWAIP3Ss4FByFe61a5XL5yi1TJen8Xy9cUdnpNp_mRWrckdRChJwsevcw7UrTt2kfSUtC840SlIjCvFWXir_PiIdM1yD5m7ETmSRrunkLtFehvKWHn3LjpeUprqEHg/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>

STEP 6 

Now search for below code in your template

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

STEP 7 

• 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://hacerneto.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/AVvXsEgDGPQy_wk_Z5BJdNo3Vvfm-cbyY16TI7LGwQry01HjjmPEgewIIJ0mxQrjaNf-dFMekZx8VRT1nHOcDUCo7xHFjkdK6D5_y6ngVRkmgYhqjFVkfQlhwFHMhCMx62RLGfku8N9NxqsG0XH5/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/AVvXsEgDGPQy_wk_Z5BJdNo3Vvfm-cbyY16TI7LGwQry01HjjmPEgewIIJ0mxQrjaNf-dFMekZx8VRT1nHOcDUCo7xHFjkdK6D5_y6ngVRkmgYhqjFVkfQlhwFHMhCMx62RLGfku8N9NxqsG0XH5/s1600/ico.png' style='border: 0'/></a></b:if></b:if>

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

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