Add Related Posts Widget in Blogger

In the previous entry, we had a tutorial to add Related Post Widget using LinkWithin, here. Now, if you want more stylish and look simple but professional, you can try to use this widget. This related articles will choose your other posts  from same category or labels. With this widget, your readers will remain in your blog as they wanted to read your other posts.

Let's start :

Note : Before make any changes, backup your  templates.

1. Go to your Dashboard > Design > Edit HTML > Check Expand Widget Templates.

2. Find this code </head> 

3. Put this code below, above </head>

<style> #related-posts { float : left; width : 480px; 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://sites.google.com/site/howtohouse/tools/howtohousefavicon-3.ico") 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='https://sites.google.com/site/howtohouse/hth-scripts/howtohouse-RelatedPost.js' type='text/javascript'/>

4. Now, find this code <data:post.body/> . If you can't find it, find this code <div class='post-body>

5. Put this code below, under it :

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

8. Save and DONE!

Customization :

You can change the number of maximum related posts being dispalyed for each label.  Find this code max-results=5, changee '5' to your desired related post value.

source : WidgetForFree