How to add related post widget

A days before i added a new gadget in this blog,you can see this at the bottom of this post which shows all related post.Today i just showing you how done this, this will help you in your blog.Just see this its quite simple.

• Login to Blogger account.


• Then go to Settings, EDIT HTML, and click on "Expand Widget templates" .

• Go to  (   < head > ) and paste the code below as instruction in the below image .

•  Copy the code below,

<!--RelatedPostsStarts--><br /><style><br />#related-posts {<br />float : left;<br />width : 540px;<br />margin-top:20px;<br />margin-left : 5px;<br />margin-bottom:20px;<br />font : 11px Verdana;<br />margin-bottom:10px;<br />}<br />#related-posts .widget {<br />list-style-type : none;<br />margin : 5px 0 5px 0;<br />padding : 0;<br />}<br />#related-posts .widget h2, #related-posts h2 {<br />color : #940f04;<br />font-size : 20px;<br />font-weight : normal;<br />margin : 5px 7px 0;<br />padding : 0 0 5px;<br />}<br />#related-posts a {<br />color : #054474;<br />font-size : 11px;<br />text-decoration : none;<br />}<br />#related-posts a:hover {<br />color : #054474;<br />text-decoration : none;<br />}<br />#related-posts ul {<br />border : medium none;<br />margin : 10px;<br />padding : 0;<br />}<br />#related-posts ul li {<br />display : block;<br />background : url("http://www.gigaimage.com/images/brrl1rtaziisu0yj6kj6.gif") no-repeat 0 0;<br />margin : 0;<br />padding-top : 0;<br />padding-right : 0;<br />padding-bottom : 1px;<br />padding-left : 16px;<br />margin-bottom : 5px;<br />line-height : 2em;<br />border-bottom:1px dotted #cccccc;<br />}<br /><br /></style><br /><script src='http://sites.google.com/site/blogknol/blogknol/RelatedPosts_For_Blogger.js' type='text/javascript'/><!--RelatedPostsStops--><br /><br />

• Now just paste the below code after the red colored data
  (data.post.body)

• Code::

<!--RELATED-POSTS-STARTS--><b:if cond='data:blog.pageType == "item"'><br /><div id='related-posts'><br /><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"'><br /><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><br /><script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();<br /></script></div></b:if><!--RELATED-POSTS-STOPS-->

• Save the Template.And check the result.!!