Very Simple Related Post Widget for Blogger Blogspot with Thumbnails

Very Simple Related Post Widget for Blogger Blogspot with Thumbnails.

This is Very Simple Related Post Blogger Widget. You can use it very Easily on Your Blogspot or Blogger Domain.

After using this Widget, your traffic of Blogger Blogspot will Increase 20 to 30 %. Its also impact on Your Revenue.

How to add Related Post Widgets in Blogger Blogspot:

Giving these Easy Steps you can add Related Post Widget into Your Blogger.

Step 1: Go To Your Blogger DashBoard, then Click on Templates and then Click on Edit HTML.

Step 2:  Expand the Widget like this picutre

 and Then Find the </head>. 

Copy Below code and Paste it After 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/AVvXsEg8luGyeAaPlE7_NdqC8VDzSrSKKGGCCAdx9VCRKNT49bjiGF5bBsQEqHKVMUIuZh4ihcVipV4xXNEhAeCBNvL6kaaGw4mYm6D_6lBfzW_fBuN65A_wPfMos56TENVfVw64UQblDabU5tiD/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-->

You Can Change the Default Picture as you define.

Now Search the Following Code or Goes there, Where you wants to show Related post Widget.


<div class='post-footer'>

If you don't want to these code, just Copy Below Code and Paste there, Where you wants to show This Related Post Widget.

<!-- 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://www.mybloggertricksnow.net'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2DsyXRuAnrrfAKPg4sFKK2cupYGhawAOasU4TR9DuhW0Q2msiUQZB-urfGjdPvfoIgg2v_5dNqaJTHjwrp5PeEt-E3nYrxQJ0_ASK4320zf93l728jLTjcsVRiBV_hVILBBD5locGOTNv/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">
<a href="http://www.haakblog.com/2013/06/simple-related-posts-widget-for-blogger-with-thumbnails.html" target="_blank" title="Related Posts Widget">Related Posts Widget</a>
<a href="http://www.haakblog.com/" target="_blank" title="Blogger Widget">Blogger Widget</a></div>
<!-- Related Posts with Thumbnails Code End-->

Now, Save Templates. You Have Done. Now you show your blog post and Enjoy this.