Best Related Posts with Thumbnails Widget for blogger full installation

About this widget

This is really a very powerfull widget for blogger. It will show related posts with thumbnails on all posts of your blog. Take a look at the picture below as a sample of this widget.

Why this widget ?

Displaying the links to related posts along with a thumbnail of the corresponding post will help you increase the page views/user .Users will be tempted to go for the related posts when they are presented attractively with thumbnails. It will keep visitors on your site for much longer time.

How to Install ?

No need to worry about installing this widget. It's very easy for anyone to install this widget on blogger. Just follow these steps to install this widget.

1. Login to your blogger account click on Design > HTML and Download your current template for backup in case of any mistakes.
2. Now check the "expand widget templates" check box
3. Now look for

</head>

and replace it with

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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 type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs0vyCHC87WrDL7CEHiNfNyGm8Qq98wt3RnnfZx5qZBcnVNxHtqEmCgyIdZyUzOiMXIxqX2XbzCMhfE75sL4fN9zGBtgy9NjXqXAwG04_n6G7zQUxxsfuWdqtxk3w5JkCQgmMcW-518eo/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

4. Now find

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

If you cant find it then try finding this one

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

Now immediately after any of these lines(whichever you could find) place this code snippet

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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>
<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: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 style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

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

var maxresults=5;

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

var relatedpoststitle="Related Posts";

7.To change the default thumbnail, you can edit this line of code

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs0vyCHC87WrDL7CEHiNfNyGm8Qq98wt3RnnfZx5qZBcnVNxHtqEmCgyIdZyUzOiMXIxqX2XbzCMhfE75sL4fN9zGBtgy9NjXqXAwG04_n6G7zQUxxsfuWdqtxk3w5JkCQgmMcW-518eo/s400/noimage.png";

8.To Change the Colour of the Splitter Line , edit

var splittercolor="#d4eaf2";

To change the other colours and all you will have to modify the CSS.If you like to give me any suggestions on how to improve this widget,then it would be really great.

How to display the related posts on every page and not only on the post pages?

Just remove the two lines starting with <!-- remove --> from both step 3 and step 2.
that is lines

<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>

and

<!-- remove --></b:if>