Saturday, January 29, 2011

Add related post Wideget to Blogger

This widget if wonderful.we can see the related post.
This very helpful to your blog readers.try to put this
widget to your blogger.

1. Go to blogger dashboard and click Design and 
click Edit HTML

2. Better to backup your template before editing this. 
3. Press Ctrl+F and find this code 
                                                </head>
4. Copy this below code after earlier code
<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 { 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 : 10px; padding : 0; } #related-posts ul li { display : block; 
background : 
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaL3BzsFSprO2-gRQ_p7NVyM6oaum-hEvOcTr9p6_GEtcI6mOpWU0In-Y98Fr1Fsmb6FCubdUzKQz3RerL0AoTkt2dINeDgcikOJsgmzwbhaS1reO0cIf-SoGJdI4VAET3bNr44np1qw4/")
 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:1px dotted #cccccc; } </style> 
<script 
src='http://theblogtemplates.com/scripts/Related_posts_hack.js' 
type='text/javascript'/>

5. Again search for
              <data:post.body/>    or   <div class='post-body>   or <data:post.body/>
 Above 3 code are same.i put it because some code are different with some templates

6. Copy this below code after 1 of earlier code.   

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

5.Click "preview and see it correct and click "save template".you are done.


0 comments:

Post a Comment