Related post widget with thumnails

 100 % working - can't afford demo

we all know the use of related post widget, when a user comes to particular post of yours, after he is done with that post he may try to get out of your site, with the related post widget you can keep him in you site because some other post can get his attention. This widget also helps to tell your visitors that,"i also have an article on this topic, this will help you please go through". Any way , to install this widget in your blogger Please follow the steps given below with at-most concentration..

Step 1: Save your Template before you try something, it will help you when something goes wrong with your editing.

Step 2:  Goto >> dashboard>> design>> edit html>> expand widgets and search for this code

</head>

and paste this code above it.

<!--Related Posts with thumbnails Scripts and Styles Start-->

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

<style type="text/css">

#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#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:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="http://3.bp.blogspot.com/_XQm2Bew_4mE/THdIb_Ryj2I/AAAAAAAAC7Y/tMCH4gsk6N4/s1600/cm_images_No+Image.jpg";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://www.yourjavascript.com/2231980270/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>

</b:if>

<!--Related Posts with thumbnails Scripts and Styles End-->

Step 3: now, search for this code

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

or

<p class='post-footer-line post-footer-line-1'>
 

 

now paste this code right below it,

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<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><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://www.wierdwalker.com/2010/08/related-post-widget-with-thumnails.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://www.wierdwalker.com/' ><img style="border: 0" alt="Blogger Templates" src="" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Step 4: save it,

Customization: You can replace the codes in the red with your own details,
->to increase or decrease the maximum results of the posts please edit, max-results=6

in the above code.
->You can change the widget tittle by editing this code var relatedpoststitle="Related Posts"
remove <b:if cond='data:blog.pageType == &quot;item&quot;'>  and </b:if> given in blue in the code

demo, click here

Thats It..