CSS – Style 3(for Black and dark backgrounds)

8:06 PM
In this post I’ll give you three awesome styled related post widget for blogger. Actually, related posts widget increase your blog’s bounce rate. Also many related posts widget for blogger look boring and ugly. So, hope you like all of the three.
The JavaScript
Paste the below JavaScript code above </head>
<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggerblogwidgets.googlecode.com/files/Related-Posts.js'
  type='text/javascript'/>
The HTML

Now find the below line 
<div class='post-footer-line post-footer-line-1'> 
or
<p class='post-footer-line post-footer-line-1'>
Now paste this code below it
<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=5&quot;' type='text/javascript'/></b:if> </b:loop> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(); </script> </div> </b:if>


The CSS(Style 1) 


Paste the below CSS code just above </b:skin>


 #related-posts {

clear: both;

}

#related-posts ul{

margin: 20px 0; padding: 0;

list-style: none;

}

#related-posts ul li {

border-top: 1px solid #333;

border-bottom: 1px solid #111;

}

#related-posts  ul li:first-child {border-top: none;}

#related-posts  ul li:last-child {border-bottom: none;}

#related-posts  ul li a {

padding: 10px;

display: block;

color: #222;

text-decoration: none;

cursor: pointer; -webkit-transition: padding-left 250ms ease-out;  -moz-transition: padding-left 250ms

  ease-out;  /* trans pattern: property duration timingMethod delay */

}

#related-posts  ul li a:hover {

padding-left: 20px;

}


CSS – Style 2 

 


Paste the below code just above </b:skin>
 /* Related Posts - By www.tricks-4-blogger.blogspot.com
----------------------------------------------- */

#related-posts {
clear: both;
}
#related-posts ul{
margin: 20px 0; padding: 0;
list-style: none;
}
#related-posts ul li {
border-top: 1px solid #333;
border-bottom: 1px solid #111;
background: #222;
}
#related-posts  ul li:first-child {border-top: none;}
#related-posts  ul li:last-child {border-bottom: none;}
#related-posts  ul li a {
padding: 10px;
display: block;
color: #fff;
text-decoration: none;
cursor: pointer; -webkit-transition: padding-left 250ms ease-out;  -moz-transition: padding-left 250ms 
 ease-out;  /* trans pattern: property duration timingMethod delay */
}
#related-posts  ul li a:hover {
padding-left: 20px;
background: #111;
}


CSS – Style 3(for Black and dark backgrounds)
Add the below code just above </b:skin>
 /* Related Posts by www.tricks-4-blogger.blogspot.com
----------------------------------------------- */
#related-posts {
clear: both;
}
#related-posts h2{
color: #fff;
}
#related-posts ul{
margin: 20px 0; padding: 0;
list-style: none;
}
#related-posts ul li {
border-top: 1px solid #333;
border-bottom: 1px solid #111;
background: #222;
}
#related-posts  ul li:first-child {border-top: none;}
#related-posts  ul li:last-child {border-bottom: none;}
#related-posts  ul li a {
padding: 10px;
display: block;
color: #fff;
text-decoration: none;
cursor: pointer; -webkit-transition: padding-left 250ms ease-out;  -moz-transition: padding-left 250ms
  ease-out;  /* trans pattern: property duration timingMethod delay */
}
#related-posts  ul li a:hover {
padding-left: 20px;
background: #111;
} 

Save Template NOW !! 
,