How to Add Related Posts widget for Blogger Blog

In this article i give you a Related Posts widget for blogger. It's increase you site traffic because when the users read your article at the end of article the related posts widget will show and the users click on a posts which they want to read and they automatically attract to you.

This Information We Comprehend How Add Appropriate Material widget For Blogger Blog or website author With Images.its Amazing Css Ctyles We Comprehend This post how we can use this, its Amazing strategy For Get more guests And also show old artilce/posts Below New post.when analyze out your post And End of The post New Appropriate Material Display With thumbline.let's we coming back and how we can do this.

Follow Some Below given activities And put Effectively Css Specifications.

Go To >> Blogger.com >>Choose Blog>>Template>>Edit HTML

Check the "Expand widget template" box.

Now press "F3" or "CTRL+F" and search this code on your template.</head> 

Copy And Paste the bellow code Before/Above </head>

<!--Related Material with pictures Applications 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 noticeable #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/AVvXsEj4dwJJQV9nzPLHA_0kGMxMgDEVifx61iLjxXQqhTEWNQRJEDWS9MqFPyEtn_o39kMCUAL3vVkbYGrPVFUNZ8PnZlUaOx1NDieQOfTrYdEdCFbT0HxEugNsQfn8hZomN3fsKvdTliNQtQr_/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 Material with pictures Applications and Styles End-->

Note. If You Want More Change Value Display Publish "var maxresults=5; You Can Change 5.

Now Next Get the Following concept.

<div class='post-footer'>

Now Next  just above it, duplicate the below concept.

<!-- Appropriate Material with Images Rule 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://onlineitsofts.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtEQMdxzGsPGL5LQFAZlzKBMv3JwLYVAo-y0_9wjZkuhIUKmgQlFRNnMj6mW4eoU_Fklu6i9jioOYkJLz4DY0eszHxdadHtwRMUxs-s1v5PlOEs20P0hSGdCMense61ow6SCGPHJ5IVjT4/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Appropriate Material with Images Rule End-->

Note. Change the 6 value from max-results=6 with the wide range of content you want to be proven.

Now you can successfully add Related Posts widget to your blog.

Preview of your widget!