Free Related Posts Widget For Blogger
Related Posts Widget untuk blog anda
Displaying the links to related posts of the corresponding post will help you increase the page views/user. Users will be tempted to go for the related posts when they are presented attractively with others blog posts title.
Lets begin,
1) Go to Design > Page Elements > Edit HTML > Expand Widget Templates
2) Press Ctrl+F and find this </head>
3) Now copy the code below and paste it Before(Above) </head>
<!--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-->
4) Find this code, <data:post.body/>
5) Now copy code below and paste it Below(After) the lines.
<!--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-->
6) Save Template.
Optional : In order to change the number of maximum related posts being displayed for each label, search for the code (max-results=5) and change the number "5" to any desired number.
** This code was originally posted by Blogger.webaholic.co.in
.
OR
Pick a 
4 comments:
related post widget without thumbnail. also good for your blog. just try it.
thank you.. really work for me perfectly!
Thanks man. I've got the related post with tumbnail before but I don't like it so this post help me alot
nice one... have a nice day!!
Post a Comment