Related Posts Widget | How To Add Related Posts Widgets

RELATED POSTS WIDGET FOR BLOGGER

Here comes a mind blowing trick for exhibiting related posts under each and every post of your blogger blog!  

With this trick you can make your visitors spend longer time on your blog because, you know, when they will see the posts related to their interest they will be bound to spend time reading those posts too.


If a visitor stays on your blog, he/she will surely get to know you and then you can expect them to leave some comment. The related posts are chosen from the same category/tag/label.

ADD RELATED POSTS WIDGET TO BLOGGER

Simply follow the following steps:


Step1:- Go to Blogger Dashboard >> Template >> Edit HTML;

Step2:- Check the "Expand Widgets Template" box;

Step3:- Search (Ctrl + F) for the following code:

</head>

Step4:- Copy and Paste the following code just above/before  </head>

 <!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<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="https://picasaweb.google.com/lh/photo/3dQ15Bo3ZcQF57IusqBtBP62gILMQY-aVMprzsXDb2s?feat=directlink";
var maxresults=5;
var splittercolor="#DDDDDD";
var relatedpoststitle="Related Posts";
</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-->

Hints:
# To change my picture replace the URL in Green
# To display more than 5 posts just replace 5 with your desired number
# If you want the Related Posts to be shown on your homepage also, remove the code in Red


Step5:- Find the following code:

 <div class='post-footer'>

Step6:- Copy and Paste the following code just above it:

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</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/AVvXsEgQFqS9WSPEKjF3PN4kgDDZgvCah5iwlwbzYU-QdiUmDhnkoUMAGB1hEatEktDCawXHwg0laJ0maKKWi-cyPTHUtx3GIW8DQzp8-R4fOLFHS-ntEaTWHrliT0jBZlOpfvMXwxo-FgiSPbhyphenhyphen/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Hints:
# Replace 6 with your desired number if you want more than 6 posts to be displayed.
# Remove the code in Red if you would like related posts to be shown on the homepage too.


Last Step:- Save the Template


Enjoy the Widget!!!