How to Install New jQuery Scroll to Top Button on Blogspot




How to Install New jQuery Scroll to Top Button on Blogspot

introduction New jQuery Scroll to Top Button: Code create effect fade and cool effective in gadget blog. It’s smoon because it is made of jQuery and it is always hidden until you move down and again faded away when you come up. It is simple and easy to install to any blog.

Tutorial: Step by step config easy blog for you!

Gadgets screenshot goes here!

Smooth Scroll jQuery Back To Top Button:Step 1 : Go to Blogger Dashbord → Template → Backup your Template

back up your template on blogger

Step 2 : Now Template → Edit HTML

JQuery Scroll To Top Button For Blogger

Step 3 : Search the code given below using (press CTRL+F)

]]></b:skin>
Step 4: Copy and Paste the following code Directly Above / Before]]></b:skin>
Code Here:
#toTop {display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;overflow:hidden;width:51px;height:51px;border:none;text-indent:-999px;background:url(http://3.bp.blogspot.com/-ZaFk139_d7Q/ThWy56hQTtI/AAAAAAAAEtc/i7lYDE7NQRY/s1600/ui.totop.png) no-repeat left top;}#toTopHover {background:url(http://3.bp.blogspot.com/-ZaFk139_d7Q/ThWy56hQTtI/AAAAAAAAEtc/i7lYDE7NQRY/s1600/ui.totop.png) no-repeat left -51px;width:51px;height:51px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);}#toTop:active, #toTop:focus {outline:none;}
*Note – To move the button to the left of your blog change right:10px; to left:10px; .
Step 5: Find the following piece of code in your blogs Html : (Press Ctrl and F for a search bar to help find the code )
</head>
Step 6: Now Copy And Paste This Code Directly Above / Before</head>
*Note – If you have previously added jQuery script to your template you can leave out the line in green.
Code here:
<script src=’http://code.jquery.com/jquery-1.6.1.min.js’ type=’text/javascript’/><script src=’http://suyb.googlecode.com/files/jquery.easing.1.3.js’ type=’text/javascript’/><script src=’http://suyb.googlecode.com/files/jquery.ui.totop.js’ type=’text/javascript’/><script type=’text/javascript’>$(document).ready(function() {/*var defaults = {containerID: &#39;moccaUItoTop&#39;, // fading element idcontainerHoverClass: &#39;moccaUIhover&#39;, // fading element hover classscrollSpeed: 1200,easingType: &#39;linear&#39;};*/
$().UItoTop({ easingType: &#39;easeOutQuart&#39; });
});</script>
Step 7: Save your template and reload your blog.
Thank read: How to Install New jQuery Scroll to Top Button on Blogspot