Displaying the links to related posts along with a thumbnail of the corresponding post will help you increase the page views/user .Users will be tempted to go for the related posts when they are presented attractively with thumbnails.
So you are tempted to add this widget then follow this steps:

1. Login in to your Blogger Account.
2. From Dashboard Click on Layout and the Click on Edit HTML.
3. Then Check the “Expand Widget Templates“.
4. Find </head> .
5. Then Before  </head> Paste the following Code.

   <!--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="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
   var maxresults=5;
   var splittercolor="#d4eaf2";
   var relatedpoststitle="Related Posts";
   </script>
   <script src='http://best2know.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
   <!-- remove --></b:if>
   <!--Related Posts with thumbnails Scripts and Styles End-->

6. Now Find
   <div class=’post-footer-line post-footer-line-1′>.
7. Now immediately below that line add this code.

   <!-- Related Posts with Thumbnails Code Start-->
   <!-- remove --><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&amp;callback=related_results_labels_thumbs&amp;max-results=6"' type='text/javascript'/></b:loop>
   <script type='text/javascript'>
   removeRelatedDuplicates_thumbs();
   printRelatedLabels_thumbs("<data:post.url/>");
   </script>
   </div><div style='clear:both'/>
   <br/>
   <a href="http://www.best2know.info/2010/04/you-might-like-this-widget-for-blogger.html" target="_blank"><b>Grab This Widget</b></a>
   <!-- remove --></b:if>
   <!-- Related Posts with Thumbnails Code End-->

   [Re:FIXED]
8. You can adjust the maximum number of related posts being displayed by editing this line in the code.
   var maxresults=5;
9. To edit the title of the widget you can change this line of code.var relatedpoststitle=”Related Posts”;
10. To change the default thumbnail, you can edit this line of code.
    var defaultnoimage=”http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png”;
11. To Change the Colour of the Splitter Line , edit.
    var splittercolor=”#d4eaf2″;

To change the other colours and all you will have to modify the CSS

If you fall into troubles implementing this,don’t panic.. :) .just leave me a comment here and i will help you out. If you like to give me any suggestions on how to improve this widget,then it would be really great.

Just remove the two lines starting with <!– remove –> from both step 5 and step 7.

that is lines

<!– remove –><b:if cond=’data:blog.pageType == &quot;item&quot;’>

and

<!– remove –></b:if>

After listening to the comments by all of our visitors this code has been updated.