rollno:13: add related posts widget to blogger (simple).

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.This gadget is quite similar to linkwithin's related posts but if you are going use this gadget then you are getting many options to customize this gadget according to your template.

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

</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, “
Times New Roman”, 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-r2supmsnvmtKNqqj3EYWCBdHasOfmyo2O561JIp69eH5lv9ez1w0JwXlASlj7cFJlgP9J7wa-yYYJyRNQazoaQ4JBsd_VxFxpd07_Wi7GOsOtVgl5rLd8NytgfueGRxi1fLFLAW9T7w/s400/noimage.png"; var maxresults=5; var splittercolor="#d4eaf2"; var relatedpoststitle=""; </script>
<script src='http://code.helperblogger.com/hb-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'>
<b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != "true"'></b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=7"' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script>
</div>
<div style='clear:both'/>

</b:if><b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img alt='Related Posts Widget For Blogger with Thumbnails' src='http://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></a><a href='http://bloggertemplates.bloggerplugins.org/'><img alt='Blogger Templates' src='http://image.bloggerplugins.org/blogger-templates.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=5; code in 2nd code.

be vigilant and careful while doin html / javascript duties

coz it may lead to info leaks or slowing down or unworkability.

also check out google blogger terms and conditions.