How to add related posts with thumbnails in blogspot?

Displaying the links to related posts along with a thumbnail image of the corresponding post will help you increase the page views and users will be tempted to go for the related posts when they are presented attractively with thumbnails.

[... This post has been last updated on 28th July 2015 ...]

NB: Before editing your template, you may save a copy of it (Recommended).
  • To do this on Blogger Dashboard Click Template
  • Click Backup / Restore
  • Then click Download full template

Related posts widget to Blogger / Blogspot

1. Go to Blogger Dashboard and Click Template
2. Click Edit HTML
3. Now copy the code below and place it before </head> tag

<!--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="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://cdn.rawgit.com/Qposter/relatedposts/master/relatedposts.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

4. Scroll down and Find this Code :

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

5. If you can't find it then try to finding this one :

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

6. Now place the code snippet after any of these lines :

<!-- 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> 
<!-- Related Posts with Thumbnails Code End-->


7. Now Click Save template
8. Results:

related posts


9. You can adjust the maximum number of related posts by editing this line in the code :

var maxresults=5;


10. Showing max results per label by editing this line in the code :

max-results=6


11. To edit the title of the widget just change this line in the code :

var relatedpoststitle="Related Posts";


How to display the related posts on every pages?

1. Just remove the lines starting with :

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


2. And remove the lines ending with :

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

Don't Miss A Single Updates

Remember to check your email account to confirm your subscription.

Blogger
Disqus
Post a comment ➜

No Comment