Add Related Posts Widget With Thumbnails In Blogger

Related post widget with thumbnails is a good widget all bloggers ought to have on their blog since it increases page views & readership while your blog traffic bounce ratio will decrease gradually. 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.

Related Posts With Thumbnails Widget Demo

Live Demo

How To Add Related Posts With Thumbnails Widget To Blogger

• Go to Blogger Dashboard 
• Click on DropDown Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML --> Proceed --> Expand Widget Templates
• Press Ctrl + F and search the code shown below

</head>

• Now replace it with the code shown below

<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/AVvXsEjYIkepgbaxKD5WQdoDdZi-N1j7hGTOmYIsegZ7J7zL3_CMPK9-x03eKOsCiPOPVjh8GBsuZEbzKVU9naRuf2TxtqUluTnvS3ULzNrkZCsUbowILkXf-kZFqRmtjtN0Io3cHR4cPpO-cCA/s1600/noimage.png";
var maxresults=7;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://latest-hacks.googlecode.com/svn/gadgets/relatedpostwiththumb/related.js' type='text/javascript'/>
</b:if>
</head>

• Now find the code shown below using Ctrl + F

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

• Now replace it with the code shown below

<div class='post-footer-line post-footer-line-1'>
<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'/>

• Now save your template
• Change maxresults=7 in red above to the number of posts you want displayed

Like it? Share it.