Related Posts Widget For Blogger

Related posts widget is very important for a blog, because it increases the number of page views and also help the visitor to view other posts related to blog. Now here is wonderful trick to display links to related posts beneath each posts. At their blogs today there are many types of related post widget, and related items thumbnail images using HTML, Java script, etc. .. Here I will show a method that is easy to show install.It related post widget will look like a picture above.

Steps to add related post widget are given below.
STEP1:→ At your blogger dashboard click on template then click on edit html.
STEP2:→ In your template html code search for "  <div class='post-footer'>   “.
STEP2:→ Then add the code given below right after <div class='post-footer'> code.

<!--related posts by tricks tower start-->
<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;
margin-top: 20px;
}
.footer-title {
border-bottom: 1px solid #ddd;
border-top: 1px dotted #ddd;
color: #000000;
font-size: 24px;
padding-bottom: 10px;
padding-top: 10px;
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
}
#related-posts .widget h2, #related-posts h2{
font-size: 17px;
font-weight: normal;
color: black;
font-family: Arial Narrow;
margin-bottom: 0.75em;
padding-top: 0em;
}
#related-posts a{
font-size: 18px;
color: #FF0000;
font-family: arial,halvanica;
font-weight: bold;
}
#related-posts a:hover{
font-size: 18px;
color: #00FF00;
font-family: arial,halvanica;
font-weight: bold;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:none;
text-color:#000000;
}
#related-posts ul li {
list-style-type: none;
border-left: 2px solid #1399CF;
border-bottom: 1px dotted #1399CF;
margin-bottom: 3px;
padding-left: 30px;
padding-top: 10px;
background: rgba(92, 255, 0, 0.31);
}
#related-posts ul li:hover{
background-color: #1399CF;
border-left: 2px solid #B3CA3D;
border-bottom: 1px dotted #B3CA3D;
}
</style>
<div class='footer-title'>
<b>YOU MIGHT ALSO LIKE</b>
</div>
<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='https://googledrive.com/host/0ByR-ZXm7qkC1WHpsVUIwTzJMUWc' type='text/javascript'/>
<!--Remove--></b:if>
<!--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> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script> </div></b:if>
<!-- related posts by tricks tower end—>

NOTE:→ This widget appears only on your post pages.
If you are facing any problem then please leave your comments below. You can also add this code as an hrml/javascript.