How To Add Related Posts Widget with Thumbnail To Blogger

Now here is a wonderful Trick for displaying related posts beneath each of your blog posts, along with thumbnails.  With this Trick many of your readers will remain on your site for longer periods of time when they see related posts of interest.

How to add Recent Posts Widget to Blogger  

Go To Blogger Dashboard.

1. Next, go to Template, and click on the Edit HTML button:

2. Check the "Expand Widget Templates" box:

3. Search (using CTRL + F) for the following code :

</head>

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

<!--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/AVvXsEhdPclX5EXQZ2yD5dHN8ONPYSwwPjeIPUVd0aG_STfr9441-yWZ0p3f4szNWPv8ABx5V7DxTGLOQndzwmjJTFUbQWewa1xMlivvpVWsaUkybquEsf790VmhvSKDTFLE3jJaIkY_Xzg5dL9r/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-->

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

5. Now find the following code:

    <div class='post-footer'>

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://pinkusays.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ_V3YX2_j3XwHSPoMLaGn-OgkMEBSRmYu5N4lScUPyMdXwsACaM5o4owjV_EUPhvmWId-EqathRfTj9HCCN71OX7LoFPjCM-ZhuC8ogU-We1OIndGoo3JTsh2H7UEU8UvXvzoINQagup_/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

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

Save your template. You are Done!

Don't Miss These Killer Articles on Facebook:

1.How to Add Facebook Plugins Like Box To Blogger?

2.Easy Trick to enlarge locked profile picture ?

3.How to Add Scrolling Recent Posts Widget For Blogger?

Posted in: How to blog, Tutorials