Monday 10 September 2012

Add scrolling thumb related post widget below all post easily

Hello friends now add this special scrolling thumb related post widget below all blogger  post easily now.


  Follow simple and easy step to adding this special related post widget in your blogger---->>>
* First go to your blogger Dashboard.
* Now click in design tab and edit HTML.

* Click in small box to expand your blogger Template.

* Now find </head> by CTRL+F key.
* Copy below code and paste before </head> 
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
background-color:#0BF7E9;

}

#related-posts a{
color:#0000FF;
}
#related-posts a:hover{
color:#000000;
}

#related-posts a:hover {
background-color:#C8E6E1;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWw03sDnEpHzrf5y-yAsfGyA0ynmgH9EwRBYvsXH9gbYr3cti8G4AtPsoHMCaEH4yyGfTk2a68MYH-6X5nTICggJGoeF9UGdiv8oC3r1_WhsBAzJ1CthH4vYPYZ5MWDw5HrQs3k2Axy3g/s400/noimage.png";
var maxresults=10;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
* Now again find below code by CTRL+F key--->>>
<div class='post-footer-line post-footer-line-1'>
                                   OR
<p class='post-footer-line post-footer-line-1'>
* Now immediately after any of these lines(whichever you could find) place this code snippet 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'><marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<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:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script></marquee>

</div><div style='clear:both'/>
<!-- remove --></b:if> 
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if></b:if>
* Mow click to save your blogger template now you are done .

No comments: