Adding Related Post Widget To Your BlogPost !!

So this is a new tutorial Again. You guys must be thinking I have gone mad writing again and again This many tutorials, But to tell you the truth am getting obsessed with this Blogging.

Now in this Tutorial I will Help you guys to install Related Post widget. Why should you have this widget?

This widget will help you Drive more traffic and will help your Readers stay on your site for longer.

Its Easy like all The other Tutorials. just follow Steps and you are done.

Here are the Steps :

• Log in to your blogger account.
• Go to Design --> Edit HTML
• Check in the "Expand Widget Templates" box
• Copy the code below, and paste it above </head> 

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:85px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: #585858;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#8A0000;
}
#related-posts a:hover{
color:#000000;
}

#related-posts a:hover {
background-color:#D91F00;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Now if you want to make any changes here like changing the color of the font the you have to change this

#related-posts a{
color:#8A0000;

Changing the hover color (when we take our mouse over the post) then change this

#related-posts a:hover {
background-color:#D91F00

And If you want to Shift the Related post from left to right or center or adjust according to your like then change this

padding-left:85px;

Now there is Still some more (What you thought its done :P).

 Then find this code

<div class='post-footer-line post-footer-line-1'>

If you cant find the above code then find this one

<p class='post-footer-line post-footer-line-1'>

 After that copy the code below, and paste under one of the code above 

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<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_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Customize :
var maxresults=5; is the maximum result of the related posts that shown in every post
var relatedpoststitle="Related Posts"; is the title of the related posts

If you've finished with your settings, just click  Save Template. 

 What You Still Want more. Its done already :)
 More Coming Soon Enjoy

Posted in: Blogging