How to Add Related Posts widget to blogger.

The related posts widget it’s very important role in every blog and every website because your visitor stay on your blog and website to very long time. So your blogger impression and blogger traffic are increase day by day. But the blogger are not available for this facility to the simple blog so I have to manually implement this widget. If you have to add related post widget on your blog then don’t search just follow my all the step and implement to your blogger.

Methods to Implements:-

1.       Now Logging to your blogger

Note: - Backup your current template coding after you have to apply this process.

2.      Go to Dashboard---> Template ---> Edit HTML

3.      Press CTRL+F in the code window and find </head> this code.

4.      Copy below Code and paste in above/Before </head> this code.

<script src='http://rpb.googlecode.com/files/rp.js' type='text/javascript'/>

5.      Press CTRL+F in the code window and find <data:post.body/> this code.

6.      Copy below Code and paste in after <data:post.body/> this code.

<font face='Georgia' size='4'><b>You might also like : </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"'>

<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop> </font>

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

</script>

</div></b:if>

7.      Press CTRL+F in the code window and find ]]></b:skin> this code.

8.     Copy below Code and paste in above/Before ]]></b:skin> this code.

#related-posts

 {

float : left;

width : 480px;

margin-top:70px;

margin-left : 5px;

margin-bottom:16px;

font : 14px Verdana;

color:#333333;

 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 : 20px Verdana; 

font-weight: bold;

 margin : 5px 7px 0;

 padding : 0 0 5px;

color:#111111;

}

 #related-posts a

 {

text-decoration : none;

color:#333333;

}

#related-posts a:hover

{

 text-decoration : none;

color:#ffffff;

}

#related-posts ul

{

border : medium none;

 margin : 10px;

padding : 0;

 }

 #related-posts ul li

{

display : block;

background : url('http://3.bp.blogspot.com/-rOovw4Gms5c/UPVlXUJvuHI/AAAAAAAAA1I/KVkRG4CP670/s1600/ul-icon.png') 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:2px dotted #333333;

}

#related-posts ul li:hover

{

background:#222222;

color:#ffffff;

}