Related Posts With Thumbnails For Blogger

Related posts is a very useful widget for blogger users. Because it will help them to read the post related to the topics which they were reading. It is one of the most useful blogger widget. By using this widget you are also providing a user friendly experience. It is one of the best interlinking statergy.
Related post for blogger is a must have widget because it will help you to increase your pageviews, time on site and also helps in decreasing the bounce rate for a blog. I should highly recommend to add this widget for blogger because it will helps in providing a good user experience and also helps in SEO for your blog.
This gadget is not in the blogger's layout admin panel. So you need to put a code in your template to have this widget on your blog. So, follow the steps below to have this related post widget for blogger.
1. Go to Blogger and click on template option.
2. Now click on edit template option.
3. Now search for this "</head>" tag and paste the following code before it.

<!--Related Posts with thumbnails Scr
<b:if cond='data:blog.pageType == &q
<style type='text/css'>
#related-posts {
    float:left;
    width:auto;
}
#related-posts h2 {
    margin-top: 10px;
    background:none;padding:3px;
}
#related-posts .related_img {
    margin:5px;
    border:4px solid #f2f2f2;
    width:105px;height:105px;
    transition:all 300ms ease-in-out
    -webkit-transition:all 300ms eas
    -moz-transition:all 300ms ease-i
    -o-transition:all 300ms ease-in-
    -ms-transition:all 300ms ease-in
}
#related-title {
    color: #222;
    line-height: 16px;
    padding: 0 10px;
    text-align: center;
    text-shadow: 0 2px 2px #fff;
    width: 100px;
}
#related-posts .related_img:hover{
    opacity:.7;
    filter:alpha(opacity=70);
    -moz-opacity:.7;
    -khtml-opacity:.7
}
#related-title:hover {
    text-decoration: underline;
}
</style>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="http://2.b
  function showrecentposts1(json){j=(
//]]>
</script>
</b:if>
<!--Related Posts with thumbnails Scr

3. Now search for this " <div class='comments' id='comments' " tag and pate the following code before it.

<!-- Related Posts with Thumbnails Co
<b:if cond='data:blog.pageType == &q
    <div id='related-posts'>
        <b:loop values='data:post.la
            <b:if cond='data:label.is
        </b:if>
        <b:if cond='data:blog.pageTyp
        <script expr:src='&quot;/fee
        <script type='text/javascript
            var currentposturl=&quot;
            var maxresults=6;
            var relatedpoststitle=&qu
            removeRelatedDuplicates_t
            printRelatedLabels_thumbs
        </script>
    </div>
</b:if>
<!-- Related Posts with Thumbnails Co

Now related post for blogger has been added and you can now use it for free. This will helps you to provide a good experience to your users.
Screenshots: