How to 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>

4. Now find the following code using the same method you used to find </head>:

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

5. If your Blogger template don’t have that code, don’t worry. Find the following code:

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

6. Add the following code right after the particular code mentioned in Step 4 (or in Step 5):

<!-- 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-->

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.

Customization:

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.