Related Post Widget For Blogger With Mouse Hover Effect

    Today  i share a  valuable and very useful information for bloggers about  related post widget. It made with blue color theme with mouse hover effect. Related posts help to attract peoples and it increase peoples visiting time. So it is very useful to all bloggers. You can simply add this widget on your blog. If you want to add this widget to your blog, follow instructions..

please comment..............below




Log in your Blogger account.

• Select Layout option

• Click on Edit HTML button

• Select “Expand Widget Templates”.

• Find (CTRL+F) </head> tag.

• Copy and paste below code before </head> tag.

<!--MHRelated Posts 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;
margin-top: 20px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:8px;
}
#related-posts .widget h2, #related-posts h2{
font-size: 18px;
font-weight: normal;
color: black;
font-family: Arial;
margin-bottom: 0.50em;
padding-top: 0.25em;
}
#related-posts a{
font-size:16px;
color: #555555;
font-variant:small-caps;
}
#related-posts a:hover{
text-decoration: none;
color: #ffffff;
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:3px;
}
#related-posts ul li:hover{
background-color: #1399CF;
border-left: 2px solid #B3CA3D;
border-bottom: 1px dotted #B3CA3D;
}
}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related_posts.js' type='text/javascript'/>
<!--Remove--></b:if>
<!--MHRelated Posts Scripts and Styles End-->

• Again Find (CTRL+F)  <div class='post-footer'> tag.

• Copy and paste below code after  <div class='post-footer'> tag.

<!-- Related Posts 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> <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> <!--Remove--></b:if> <!-- Related Posts Code End-->

• Save your Templates.

Leave a comment…….. If this widget is not working……………………..

Posted in: Blogs and Websites, Tips N Tricks, Tricks + Hacks