Saturday, March 19, 2011

Add Related Post Widget on Your Blog

Adding some widget on your blog is very important, besides it make your blog more attractive, it's also easier visitor on searching article on your blog.

One of the widget which could be an alternative is adding Related Post. With adding related post, visitor could find any article in you blog which have same topics (depend on the label), and make visitor longer in your blog.

How to add Related Post:
1. Open your Blogger Dashboard and go to Design -> Edit HTML
2. Before you edit the HTML code, make sure you backup your template
3. Check the "Expand Widget Template" box


4. Search the <head> text and add this code before <head>

<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/AVvXsEhReuU2IxYUot4-maF4YBP2DShnZpIX5mXj98yKkMN91FfCrHSAGp7uNYbBXXHtvNZOipfdw-iIf7TkPecxfbWQd-uS106zOYG6D9EXzGtl71NEv5VhAxBtOtwc4k2PL5-ihy9Ss637J6A/") 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'/>



5. Search tag <data:post.body/> or if there's no like that search <div class='post-body> tag
6. Add the code beneath the tag that you search 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;'>
<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>


7. Save your template, and your widget will appear soon on your blog!

Happy trying.. ^^

No comments:

Post a Comment