HOW TO ADD RELATED POSTS WIDGET WITH NUDING EFFECT IN BLOGGER/BLOGSPOT

Posted by : ADMIN Thursday, 28 June 2012

In this post i will show you How To Add Related Posts Widget With Nuding Effect in Blogger/Blogspot. Now i will give you two awesome/stylish related post widget for blogger. Choose anyone and install it to your blogger blog

HOW TO ADD RELATED POSTS WIDGET WITH NUDING EFFECT TO BLOGGER/BLOGSPOT

Go to Blogger Dashboard --> Design --> Edit HTML
Backup your Template before making any changes to your blog
Now Expand Widget Templates
Find the code shown below using [ctrl+F]

Now Replace it with the code shown below

<div class='post-footer-line post-footer-line-1'>
<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=5"' type='text/javascript'/></b:if>
</b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

Now select any one code shown below

CODE 1

DEMO

Live Demo

Copy the code shown below and paste it 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;
}
#related-posts ul li a:hover {
padding-left: 20px;
}

CODE 2

DEMO

Live Demo

Copy the code shown below and paste it above </b:skin>

#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;
}
#related-posts ul li a:hover {
padding-left: 20px;
background: #111;
}