Related Posts Widget for Blogger / Blogspot
Wednesday, 8 August 2012 -
blogger widgets
No comments
blogger widgets
No comments

This widget will show related posts(You might like also…) section below every post page.The related posts titles are fetched from current post page label[s].
This Widget also increases SEO and Pageviews of your blog.
How To Install Related Posts Widget ?
There are three sections in this widget 1)CSS 2)JavaScript 3)WidgetcodeNOTE: Please BackUP your template Before installing
- Login to your blogger
- Then Go to Layout > Edit HTML
- Check Expand Widgets
- Now Add Bellow CSS code Right before
]]></b:skin>tag#related-posts {
padding:10px;
display:block;
clear:both;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
line-height: 1.2;
margin-bottom: 0.75em;
margin-top: 0;
padding-top: 0;
}
#related-posts a:hover{
text-decoration:underline;
}
#related-posts ul{
list-style-type:none;
margin:10px 0;
padding:0;
}
#related-posts ul li{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEw9MagqqrKTQAMVJcp_1QpcEi8Q0-ZlPUouSjOGVF0RdnZJ0oYiX_lXAXtZHx2D2CmBYush8yA3hEsm4f4Anp54pIbZj-4v0r0DyXcQWYwAmAGKzL1mXukFTxq-qMOVISdF3zKxJjMYx0/s320/w2barrow.gif") no-repeat scroll left center transparent;
display: block;
list-style-type: none;
margin-bottom: 10px;
padding-left: 20px;
padding-top: 0;
} - Now add Bellow JavaScript Right before
</head>tag
# If you want to change the title of your widget you can edit Bellow line in above code<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggerblogwidgets.googlecode.com/files/Related-Posts.js' type='text/javascript'/>var relatedpoststitle="Related Posts"; - Now find Any one of Bellow lines
<div class='post-footer-line post-footer-line-1'><p class='post-footer-line post-footer-line-1'> - Add Below Widget code just after it.
var maxresults=5;<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>
# Change maxresults you want to be show - Save Your Template.
You can Customize your widget by changing CSS.
If you have any doubts While installing you can contact me via comments
Related Posts Script by Blogger Plugins
0 comments:
Post a Comment