Thursday, March 28, 2013

Stylish Related Post Widget For Blogger With Mouse Hover Effect

Hi, Now i share a useful information 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..

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.

<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;
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="Related Posts";
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related_posts.js' type='text/javascript'/>
</b:if>

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

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

<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> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=6"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script> </div> </b:if>