Adding Related Post Widget To Blogger With Thumbnails

Find problems on how to make readers to stay  longer period of time in your site?  As a matter of fact, this is also one the  foundation in order to establish good readerships to our viewers.Putting a related posts  with thumbnails beneath blog posts is one way of answering that question. Those related articles are chosen  from other posts  having the same category/label/tag.

Adding Related Post Widget To Blogger With Thumbnails

Follow  the  steps  below:


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

Step 2. Check the "Expand widget template" box;

Step 3. Search (CTRL + F) for this piece of code:

</head>

Step 4. Just above that </head> tag, place the code below:

<!--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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge5Bl8oIwPXOTVew1QD6OGEmNRCVEHyNNd8xrAhUAuGLiB9DHf6oig-2uYcExrb9z2TPAxBv6EM_6zoirC7QgUTmLhl6Ksi3hTyW9yJ4kgBbNSuJXt2zeoeZG4FbrkwJ7xE83ccNMNJT5u/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Short Customization:

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

Step 5. Now look the code below:
Note:  There are two occurrences of this code, choose the first one.

<div class='post-footer'>

Step 6. And 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://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSY5nQOzfCffwB38l97LrM9YYhkUZky7J8ppf5rijDqXy77vMHrWXxN72HZNksCnxSrPo59APz-sA-UigHLHAZSYXKoEDrag_EYB9TwVgaTSi8oss6ZI3e4rz0XBITKaPhyJV6zu3Jqkw6/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Short Customization: - change the value of 6 from max-results=6 (in green color) 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 pink).
Step 7. Save now your template.
Credits goes to  helplogger with little modification from me.