Related Posts Widget For Blogger | NitchiWorld.com – The Tech Blog

Related Posts Widget For Blogger

Related Posts Widget For Blogger,With this widget many of your readers will remain on your site for longer periods of time when they see related posts of interest.The related articles are chosen from other posts in that same category/label/tag.

Steps:

1. Go to Layout >Edit HTML in your Blogger Dashboard.
2. Back up your existing Template before making any changes..
3. Check the “Expand Widget Templates” box.
4. Search for the </head> tag.
5. Add the following code just before the </head> tag.

<style>

#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(“http://i299.photobucket.com/albums/mm297/zozuglogger/weed-bullet.gif”) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

</style>

6. Now search for <p><data:post.body/></p>
7. Add the following code just below the code you just searched for.
   

   <b:if cond=’data:blog.pageType == “item”‘>
   <div id=”related-posts”>
   <font face=’Arial’ size=’3′><b>Related Posts : </b></font><font color=’#FFFFFF’><b:loop values=’data:post.labels’ var=’label’><data:label.name/><b:if cond=’data:label.isLast != &quot;true&quot;’>,</b:if><b:if cond=’data:blog.pageType == &quot;item&quot;’>

   max-results=4“‘ type=’text/javascript’/>
   
   </script>
   </div></b:if>

8. Now Save your Template and You done it…

Note:
* In order to change the number of maximum related posts being displayed, search for the code below (high lighted with blue) and change the number “4″ to any desired number.

max-results=4