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.
NB: Before editing your template, you may save a copy of it (Recommended).
2. Click Edit HTML
3. Now copy the code below and place it before </head> tag
4. Scroll down and Find this Code :
5. If you can't find it then try to finding this one :
6. Now place the code snippet after any of these lines :
7. Now Click Save template
8. Results:
9. You can adjust the maximum number of related posts by editing this line in the code :
10. Showing max results per label by editing this line in the code :
11. To edit the title of the widget just change this line in the code :
2. And remove the lines ending with :
[... 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 Template2. 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 == "item"'>
<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, “Times New Roman”, 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/AVvXsEhd5ZSvLDyqcsgP78vxqQ4Z0Q0lC9rxT_eTCJrtCw_Fk0aYpyt79dzRTMoNvSAOfkcZ6amVJ1sNpX9jwlFjddxWESVdCbFoZUUkdtKHDOw9tu5HtirB2dfkhb4RitDlXbSS0FSpVTMZ3us/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 == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code End-->7. Now Click Save template
8. Results:
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=611. 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 == "item"'>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.
