Saturday, May 12, 2012

How to add Smooth Scroll Top Button To Blogger?

Follow Simple and detailed steps on how to add a Button for smooth scrolling to top.

Steps:
1. login to your blogger account,
click on Designand then click on Edit HTML.
2. Search for </head> tag ( Press CTRL+F for a search bar to help find the tag ).
3. Add below code Before / above </head> tag.
   ( Ignore this step if your blog have already a jquery Plugin ) 

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>


4. Now search for </body> tag.
5. Add below section of code Before </body> tag.


<!--Smooth back to top by getSEOnow.blogspot.com-->
<style type='text/css'>
#w2btoTop {display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;overflow:hidden;width:51px;height:51px;border:none;text-indent:-999px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqYILKJhedqs70bt3lVU-ijRtRDNFzCn4DOu6wGt-_C7EX3rbokjvU2qzbuJCRyf6ekM3ufkgCSUC4jOlZS5BAURpGrp0H_DbKp4lwdWX4IStyPqegkpjlEnLPPOxiKEE2zI-CfoRO1Luz/) no-repeat left top;}
#w2btoTopHover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqYILKJhedqs70bt3lVU-ijRtRDNFzCn4DOu6wGt-_C7EX3rbokjvU2qzbuJCRyf6ekM3ufkgCSUC4jOlZS5BAURpGrp0H_DbKp4lwdWX4IStyPqegkpjlEnLPPOxiKEE2zI-CfoRO1Luz/) no-repeat left -51px;width:51px;height:51px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);}
#w2btoTop:active, #w2btoTop:focus {outline:none;}
</style>
<script src='http://bloggerblogwidgets.googlecode.com/files/w2b_jquery.ui.totop.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){ $().UItoTop({ easingType: &#39;easeOutCirc&#39; }); });
</script>
<!--Smooth back to top by getSEOnow.blogspot.com-->


6. Finally, "save" Template and all you're done.

0 comments:

Post a Comment

 

Tags

Site Info

Followers

blogscenters Copyright © 2009 Blogger Template Designed by Bie Blogger Template