Related posts widget had a great value among bloggers.One of the main advantage of this widget is the visitor staying capacity.It means this widget can make your visitors stay on your blog for long.The best position of this widget is below the posts.
Do you know why its the best position??
simple,When one of your visitor reads an article about a particular subject from your blog,then he will see the related posts of that subject.Then he will be really interested to read more topics related to that post.Thereby he/she will stay more time on your blog.So related posts are very helpful for your readers to navigate easily through the topics that he/she want..
So the next question is how to add the related posts widget on my blogger blog?? Follow the below steps to make it easy..
Step 1 : Login to your blogger blog
Step 2 : Goto Design >>Edit HTML
Step 3 : Check the "Expand Widget Templates" and make sure to backup your template before making any changes..
Step 4 : Now press ctrl+F and find this code:
</head>
then paste the following code before/above it.
<!--Related Post Widget Starts-->
<style> #related-posts { float : left; width : 480px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; font-weight: bold; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight: bold; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("http://www.webaholic.co.in/other/bw.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://www.webaholic.co.in/other/related-posts-widget.js' type='text/javascript'/>
<!--Related Post Widget Ends-->Step 5 : Now search again for the below code:
<data:post.body/>
Then paste the below code after/below it.
<!--Related Post Widget Starts-->
<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 != "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> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
<!--Related Post Widget Ends-->Step 5 : Save and view your template.
