Add Related Posts Widget to Blogger with Thumbnails

Add Related Posts Widget to Blogger with Thumbnails

One smart way to keep people on your site for longer amount of time is displaying Related Posts and displaying Related Posts with thumbnails is even smarter.This widget is very popular widget to display Related Posts with thumbnails in a good, clean and nice format. As you can see we have implemented this on our blog. Related post widget chooses related posts from the same category/label/tag.It will also help you increase the page views for your other posts

Steps for Adding Related Posts Widget on Blogspot or Blogger:

Step 1: Go to Blogger Dashboard >> Template >> Edit HTML

Step 2: Search(CTRL + F) for this piece of code in the template.


</head>





Step 3: Copy/Paste the code given below just above </head>


<!--Related Posts 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/AVvXsEheiuG8mhawt_daQxe2Pe87VPp3bPdZa3RV1Vf4NE3M_wQ8PUqQiLLfjOSIsITduFXhnYIRQaP07-VoG4gxr3SWCLKFkogT9-m89wiRjyeLqeZ9KpKNDpfBYLgeoa_B-Gws7hHVnCvmMqE5/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 Scripts and Styles End-->

Step 4: Now,Find the following code (Skip the first found, code to be pasted before second found)

<div class='post-footer'>

Step 5: Just above it, copy/paste this following code :


<!-- Related Posts 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://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyWe8NExnQcrumrzGI1hpTZ3ky6dp4sf3TPrLaoc0mU8m7vqepDwJMKfb5XHkQ5iko_v7X3JNfLHwkVtq0iHvp-5bgqdCNrD58iKMwRwDOdQyC8zybGY2zErmv1t87pQsiaw0P93N_9ZHe/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts Code End-->

Step 7: Save the template. 

That it, its done. Enjoy.. :)