Add Related Posts Widget With Nudging Effect in Blogger

Related post widget is a good widget for all bloggers ought to have on their blog since it increases page views & readership while your blog traffic bounce ratio will decrease gradually. This related posts widget will add below the post body. In this post i will give you two awesome/stylish related post widget for your blog. Nudging effect is add in this widget, which makes it more beautiful

How To Add Related Posts Widget With Nudging Effect to Blogger

• Go to Blogger Dashboard 
• Click on DropDown Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML --> Proceed --> Expand Widget Templates
• Press Ctrl + F and search the code shown below

<div class='post-footer-line post-footer-line-1'>

• Now Replace it with the code shown below

<div class='post-footer-line post-footer-line-1'>
<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> 

• Now select any one code shown below 

CODE 1

DEMO

Live Demo

• Copy the code shown below and paste it above </head>

<style>
#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;}</style>

<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://bloggerblogwidgets.googlecode.com/files/Related-Posts.js' type='text/javascript'/>

CODE 2

DEMO

Live Demo

• Copy the code shown below and paste it above </head>

<style>
#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;}
</style>

<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://bloggerblogwidgets.googlecode.com/files/Related-Posts.js' type='text/javascript'/>

Like it? Share it.