How To Add Related Posts Widget To Blogger With Thumbnails

How To Add Related Posts Widget To Blogger With Thumbnails

Now here is a wonderful hack for displaying related posts beneath each of your blog posts, along with thumbnails. The related articles are chosen from other posts in that same category/label/tag. With this hack many of your readers will remain on your site for longer periods of time when they see related posts of interest.

Steps adding the Related Posts Widget to Blogger/Blogspot

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

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

Step 3. Search (CTRL + F) for this piece of code: </head>

Step 4. Copy and paste the below code just before/above </head>

     
         <!--Related Posts with thumbnails Scripts http://dailybloggiingtips.blogspot.com/-->

<!-- 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{
    color: white;
    font-family: impact;
    font-size: 15px;
    margin-bottom: 0;
    margin-top: 5px;
    padding-top: 0px;
}
#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=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx_8ore5atT-zIAcGRVR4BXLx13qanPHmAJYkXm_7mOWAWIEJ0FbF5GddaN0Pp7kYT9leKmVPrYR2srmH8yhmdZ82Qj9k7zY8IdWAV38LfCCxpJHMWcnt28ihilGbmVJhG5LNXqHkCjdQ/s1600/no-Image-1.jpg&quot;;
var maxresults=7;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://tanachhim.googlecode.com/files/tanacccb.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails 
http://dailybloggiingtips.blogspot.com/ -->

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

Step 5. Now find the following code: <div class='post-footer'>

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

<!-- Related Posts with Thumbnails Code Start 
http://dailybloggiingtips.blogspot.com/-->

<!-- 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=7&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'>

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

<!-- Related Posts with Thumbnails Code End 
http://dailybloggiingtips.blogspot.com/ -->

Note:
- change the 7 value from max-results=7 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 violet.

Step 7. Save the Template

If you like please Follows Us !!