How to Add Best Related Posts Widget In Blogger Blog

Hi friends! To day i share a gaining traffic article easy way of getting free traffic on your blog. Related post widget for blogger with images and thumbnails plays an important role in increasing your traffic of your blog.such widgets helps to get clicks on related posts of your blog.there are lots of posts in your blog that does not get good amount of traffic does not matter they are written good and unique so how to get traffic for those posts which are still unnoticed by readers.then such widgets like related post widget comes to importance.many of your posts with the same labels appear in related post widget above comments and readers are more often clicks them and hence you get more traffic for your blogger blog. Here are best way to add related post widget for blogger.

Below are the step by step procedure to add related post widget for blogger. do not edit the code otherwise it would not work all the customization that are required i will explain it to you.so learn how to add related post widget in blogger or blogspot blog.

• Go To Blogger.
• Click on template and then on edit HTML.
• Type (CTRL+F) and search this piece of code.
• Type </head> in search box.
• Now copy and paste the below code before the </head> Tag.

<!--Related Posts widget for blogger 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/AVvXsEibQ540xjBncUHuqGpjsrQVm2FBM4XE1UCFcDKd2zm5KWVwmJxWoItgd5HkIlHuji2hi2JECAF9efrTBPYAYT9A6ukqisHNakWJkmVlXhyphenhyphenD9oc6BdUcWMweESURl97HLmU9YS5GCAI27EQz/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='https://makemoneyfreewithus.googlecode.com/files/makemoneyfreewithus.relatedpostwidget.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts widget for blogger End-->

Customizations

If you want to change the default picture in case one of your post does not have any thumbnails then this will appear.so if you want to change the picture then change the URL in bolded color.

If you want display more than 5 posts than change the value 5 from

"var maxresults=5;"

of your own numbers.

If you do not want related post widget to appear in homepage also then delete the code in blue color.so your widget will only appear in posts only.

Now find the following code

<div class='post-footer'>

And just above it, copy and paste the below code:

<!-- Related Posts widget for blogger 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.makemoneyfreewithus.blogspot.com'><img alt='widgets for blogger' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Uw4cnO163z0_i054C7TqPqD7lcVQxr4GwP2ooxOOmmsqubnByoTX_grtHNRK7vl-F2LUzAvu5G7zj3KRFdxEUqhNQd5zYMHPD4tCiwJnFO64A-yyRK1869h0E9TsYlOMzkdV0d1ZSVun/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts widget for blogger End-->

Note:-

If you want to display more than 6 posts then change the number 6 in max-results=6 with the number of posts that you want to display in that widget.

Save your blogger Template and you are done.