Relevant Posts Thumbnail Widget for Bloggers

  Whenever you visit some nice blog post you must see a relevant post section in the bottom of that post. This not only looks nice but this would also help your readers to surf your more posts relevant to that particular material. This is also helpful for SEO.

 In case blogger you would not find any particular widget to add, which could show relevant posts thumbnail at the bottom of every post like in word press or Squidoo. So there is a small help for bloggers to add relevant posts thumbnail widget. 

 You need to follow these simple steps. 

Step1: Go to Blogger> Template > Edit HTML

Step2: Expand widget template.

Step3: Now Search for </head> in your code. 

========================================================================

Put the following code after that. 

<!--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/AVvXsEgAl9PI3tZsaCTZ3NHkHyBkpuLWYv92wVbiu4S79_7A95ULNfJF2GL1op5hlnNhvY36MXEp4TCE62CegPKe7Pe86o0gwAbVWy3BnVI2hUBvPvGKhgC0J1yKceyTL3UujiT72MhT2b75QyU0/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-->
  ========================================================================

 Step4: Now search for <div class='post-footer'> and put the following code after that. 

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

========================================================================

Now your widget would look just like my showing in the bottom of this post.

Posted in: blogger