How To Add Related Posts Widget To Blogger With Thumbnails

Related posts widget is a great widget to increase your post-views.You can add related posts just below of the every blog post.It also shows thumbnails to attract the users.This widget was designed by bloggerplugins. I customize this widget and brought to you.If you like this then surely add it on your blog.... 










How To Add It On Blogger


1. Go To Blogger Dashboard >Template >Edit HTML.

2. Check the 'Expand widgets template' check box;

3. Now Search (CTRL + F) for this code: 

</head>

4. Paste the below code just above: </head>

<!--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: 18px;

letter-spacing: 2px;

font-weight: bold;

text-transform: none;

color: #5D5D5D;

font-family: Arial Narrow;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

border-right: 1px dotted #DDDDDD;

color:#5D5D5D;

}

#related-posts a:hover{

color:black;

background-color:#EDEDEF;

}

</style>

<script type='text/javascript'>

var defaultnoimage=&quot;http://3.bp.blogspot.com/-PpjfsStySz0/

UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg

&quot;;

var maxresults=5;

var splittercolor=&quot;#DDDDDD&quot;;

var relatedpoststitle=&quot;Related Posts&quot;;

</script>

<script src='https://docs.google.com/file/d/

0B7Q3JxFQN9Y2SlNOWS1BMUtRUGM/edit' type='text/javascript'/>

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

<!--Related Posts with thumbnails Scripts and Styles End-->

Note:

- to change the default picture, replace the URL in pink with your own
- for displaying more than 5 posts, replace 5 value from "var maxresults=5;"
- remove the code in blue if you want the related posts to be displayed in homepage too
5. Now Search the following code: 

<div class='post-footer'>

6. just above it, copy and paste the below code:

<!-- 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://bloggers-hero.blogspot.com/'><img alt='Blogger Tips and Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUNebh7t365aHf9VfWk0YebZuI5aAplh5CTQ_SVzo2kFPCVkdHFF0-fnb8q8EavpkjmWn2ivhFXtXrQ3-lLAcqylKNay8K-PPx-N-ZxPqa6uq1ZXRnr73al8LJ3KpV9g5e_OfwCXWpCMIo/s1600/best+blogger+tips.png'/></a>

</b:if></b:if>

<!-- Related Posts with Thumbnails Code End-->

Note:

- change the 6 value from max-results=6 with the number of posts you want to be displayed.
- If you want the related posts to be displayed on homepage too, remove the code in blue.

7. Save the template.That's it :)