Creative ‘Related post’ Widget For blogger Blog

With this widget helped to looking a nice or professional your blog. This widget is HTML JavaScript code. It’s a very easy to use your blog.

Step 1:

[A] Log in blogger

[B] Select your blog

[C] Select ‘Template’ at left side bar then click ‘Edit HTML’ tab

[D] Click anywhere inside the code area and press the CTRL + F keys on your keyboard to open the HTML search box.

[E] Type in Search box </head> then hit enter your keyboard to find this tag

[F] Now copy the bellow code and paste it immediately before </head> tag.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'>

#related-posts{width:100%;font-size:12px tahoma;margin: 15px 0 7px 0;}

#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:16px;padding:0;}

#related-posts ul li{display:block;background:url(/favicon.ico) no-repeat;

padding:0 0 1px 21px;margin-bottom:3px;line-height:1.6em;

border-bottom:1px dotted #cccccc;}

#related-posts ul li a{background:#fff;display:block;}

#related-posts ul li a:hover{background:#E9F5FB;}

</style>

<script src='http://dvslabs.googlecode.com/files/relatedpost-icon.js' type='text/javascript'/>

</b:if>

</head>

Step 2:

Now again search <data:post.body/> tag then copy the bellow code and past after this tag

<!-- Start Related post-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<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=7&quot;' type='text/javascript'/></b:if></b:loop> </font>

<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();

</script>

</div>

</b:if>

<!--End Related post-->

At last save your template.

That’s all