Related Posts Widget in Blogger With Thumbnails

Now Like wise Wordpress Blogger Users can also have Related Posts with Thumbnails in Blogspot Blogs.

To increase page views per user this widget can be very helpful, you can easily display the Related Posts with thumbnails below every post or below the post area with very ease.

For displaying the thumbnails you need not to worry about anything, this thing is taken care by the widget automatically, but you must have at-least one image in the post.


Follow the steps to display Related Posts Widget in Blogger With Thumbnails.

Step 1: First Login to your blogger dashboard and navigate to Layout > Edit HTML and check the "Expand Widget Templates" checkbox.
Step 2: Find the

              </head>

Step 3: Replace it with

              <!--Related Posts with thumbnails Scripts and Styles Start-->
              <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;
              }
              #related-posts h2{
              font-size: 1.6em;
              font-weight: bold;
             color: black;
             font-family: Georgia, “Times New Roman”, 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 src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js'         type='text/javascript'/>
            </b:if>
            <!--Related Posts with thumbnails Scripts and Styles End-->
            </head>

Step 4: Find the either line given below

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

Step 5: Put the code given below immediately after the above one.

<!-- Related Posts with Thumbnails Code Start-->
<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>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json- in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript' /></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Now Save Template and View your blog you will find Results, if you don't see the images then keep patient it will show you withing 24 Hours.


Note: You can adjust the maximum number of related posts being displayed by editing this line in the code.

var maxresults=5;

5.To edit the title of the widget you can change this line of code:

var relatedpoststitle="Related Posts";

If you have any issue please comment here.