Show Related Posts with Thumbnails on Blogger?

Want to show related posts on your Blogger-powered blogs? What about related posts with thumbnails? Yes, you can display links to related posts with thumbnails at the end of every blog post on your Blogger blog. Thanks to a new Blogger template hack by Blogger Plugins. All you need to do is modify your existing template by adding some extra lines of codes. Don’t worry, you can do it even without any prior knowledge of CSS or HTML. Just follow the steps below.

Guide to show Related Posts with Thumbnails on Blogger blogs:

1. Log in to your blogger dashboard, go to the “Edit HTML” section and click the “Expand Widget Templates” check box. The path is like this:

Blogger Dashboard >> Layout >> Edit HTML and check the "Expand Widget Templates" check box.

2. Now look for the following line within your template codes:

</head>

You can easily find it by pressing Ctrl+F and entering </head> in the search box that pops up at the end of your page.

3. Once you found the above code, replace it with the following code:

<!--Related Posts with thumbnails Scripts and Styles Start-->
<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 src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head></code></pre><div style="text-align: justify;">

4. Now find the following code using the same method you used to find </head>:
</code></pre><pre><code><textarea cols="65" rows="3" style="height: 76px; width: 544px;"><pre><code><div class='post-footer-line post-footer-line-1'></code></pre><div style="text-align: justify;">
5. If your Blogger template don’t have that code, don’t worry.
</code></pre><pre><code> Find the following code:<pre><code><p class='post-footer-line post-footer-line-1'></code></pre><div style="text-align: justify;">
6. Add the following code right after the particular code mentioned in Step 4

 (or in Step 5):
</div><pre><code>
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
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--></code></pre><div style="text-align: justify;"> 

7. Now save your template and test it by  opening any article on your blog. if your article is properly labeled  and that label have more than one post count, related posts will appear  at the end of your article.
<br /> </span><br /> <span style="font-family: "Courier New"; font-size: 10pt; line-height: 115%;"> </div><div style="text-align: justify;"><b>Customization:</b></div><div style="text-align: justify;"></span>

1. How to change the look of your  related posts section? You can modify the look by editing the CSS  section of code snippet posted in Step 3.

2. How to change the number of related  posts? By default, this Blogger hack displays maximum 5 related posts  (if posts are there). You can change the number of related posts with  thumbnails by changing the number in the following line (from Step 6):

var maxresults=5;

3. How to change the title of your  related posts section? Simple, just replace “Related Posts” in the  following line (from Step 6):

 var relatedpoststitle="Related Posts";

That’s it. Now your related posts with thumbnails are ready to grab the attention of your blog visitors. Note that,  this Related Posts with Thumbnails for Blogger  is a hack created by “Blogger Plugins”. So, don’t forget to say thanks  to the original author. It was really a nice Blogger template hack that  will help many bloggers.