How To setup Related post Widget In Blogger

See at the Bottom of this post you will find a Widget With the heading for my Blog Post that are related to this Post. This Widget is known as "Related Post Widget".Its Easy & Cool to Install And most of it this hack makes our blog more spicy. The visitor looking for some great articles they read and if they interested than they read no related posts.

I Tried My Self To Give a Clear explanation of this hack/tip with step by step installation. So if you get any Problem Please let me Know:- So lets Start with this hack. This is a really Nice template Hack which Also improves your CTR in your blog and hence improve your Blog Traffic.

Go to your dashboard using your google account. Then Click on Layout And followed by "Edit HTML". Now stop here for a moment we have to make our self save so please take a backup of our template by clicking on " Download Full Template ".After Taking a Backup of our Blog template now search for " </head> " . And add the below code just above this word we have searched.


<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 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://i299.photobucket.com/albums/mm297/zozuglogger/weed-bullet.gif") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

</style>
<script src='http://www.geocities.com/gskainth_99/Relatedpost.js.js' type='text/javascript'/>

Now Save your template.After That click on check box of "Expand Widget Template" in the Edit HTML page.Now look for <p><data:post.body/></p> in the template.If you have installed Read More hack on your Blog post Than your will find two times of the above code we are searching.So now we have to install the below code after the first one in our template <p><data:post.body/></p> .

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

Save your Template . Now you are done.

Here is A java File Please Copy This From this Link :- Copy Java File.
Use notepad paste it and save it as yourfilename.js . upload it to your file hosting server like geocities or googlepages. Than Replace http://www.geocities.com/gskainth_99/Relatedpost.js.js with your file Url.

Now you will have related posts widget of my style.If Any Problem comes please inform me using the below comment form.