Related Posts Widget with Thumbnails for Blogger

 here is the step:







1. login at your blog at www.blogspot.com
2. go to your dashboard and then click» template » edit html » proceed » pick : Expand Widget Templates
3. find :

</head>

4. add these script before no 3:
<!--start here-->
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3zKZHR2fg68qL4peCIMDVGRISAqMY_DNerZ_jE7KqTRvKYRCx1Kw8vTiOwRz2Pv_OWEA_zRkEUuGC6Wpc0pE4aAKNyTjPqLoBiRo_MFvtbDRBtH_FqvZyXO30YAG-qp5Pobvvv4GFKi0/s400/noimage.png&quot;;
var maxresults=5;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->