Image Thumbnail With Related Posts Widget For Blogger

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.The original script is created by Blogger's Master Aneesh of BloggerPlugins and I customized some CSS part and increases the thumbnail size to give it more beautiful look.You can see the live preview of this gadget below in preview.

1. Go to Blogger Dashboard > Design > Edit HTML.
2. Download a copy of your template first.
3. Tick "Expand Widget Templates" checkbox.
4. Now search for below tag in your template

    </head>

Just above it paste below code

    <!--Related Posts with thumbnails Scripts and Styles Start-->
    <!-- remove -->
    <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, &#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: #6E6E6E;
    color: #ffffff;
    }
    </style>
    <script type='text/javascript'> var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK6b0M8FsgElZr7hctIIVfTthrMcMBLkAScxcp3BGBwfuDWuwt3PDxF74s2K-LB9hCfz7xixlTggHm4mHDhq5Uj9CNnS_h-ZcNW9lDS_KADhVWnZGvuVcz14OwDQUB17p2SugDVnL71kI/s400/noimage.png&quot;; var maxresults=5; var splittercolor=&quot;#d4eaf2&quot;; var relatedpoststitle=&quot;&quot;; </script>
    <script src='http://code.helperblogger.com/hb-related-posts.js' type='text/javascript'/>>
    <!-- remove -->
    </b:if>
    <!--Related Posts with thumbnails Scripts and Styles End-->

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.

<!-- 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 != &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=7&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.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>
<!-- Related Posts with Thumbnails Code End-->

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.