Related Post Widget for Blogger

Related posts are very useful in increasing blog traffic by presenting them with this related posts widget to blogger. Its very important to show related posts to your blog readers, it increase your pageviews as well as reader will engage more happily in you blog.

Follow below steps:

1. Firstly login to blogger and then go to Blogger dashboard.

2. In the Blogger dashboard, click DESIGN and then, click EDIT HTML.

3. Now Press Ctrl+F and find red color code </head> and paste the below code after the above red colored code.

<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 { font-size : 20px;
font-weight : normal; 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(“https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbxnquwDe3vJGzDh2osAMKfBnYqU_cuvwxW0OL2VIwDGcH_0sisgLl-KIf7CNQQgDUatMw0c3P_5IThFfe3VpTgiV5FpUNMCnEdeMXSpKkIegceFbUiuEiaD33YTqits8BF4QQ_VL7sxc//”)
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://theblogtemplates.com/scripts/Related_posts_hack.js’
type=’text/javascript’/>

4. At last you have to search red color codes <data:post.body/> or <div class=’post-body> (find one of them) and paste the below code after above red colored code.

<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;’>

<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> </font>

<script type=’text/javascript’> removeRelatedDuplicates(); printRelatedLabels();

</script>

</div></b:if>

5. Now save your template and enjoy the widget(must preview).

Enjoy With..............

                                                       Solution Bux