Smooth CSS ‘Back-To-Top’ Widget for Blogger

Navigation is the crucial part of SEO. No doubt you write awesome articles in your blog and it can’t earn visitor’s appreciation if not properly navigated. There available many navigating plugins in which you might have added the ‘menu’ or ‘pages’ widget already. I’m talking about ‘that thing’ that would ease visitors get back to the top of the page where the menu exists. Yes! it is the ‘back to top’ widget. I use it on my site and recommend you to use it if you write long and long articles on your blog.

 

How to install the widget

Its so easy to install this widget. Simply follow the steps you read on below.

1. Login to blogger > Go to your blog’s dashboard.
2. Click on Layout > Add a Gadget > HTML/JavaScript.
3. Copy the below code and paste it in the HTML/JavaScript widget space.
4. Save the widget and check your blog/site once.

<!--Back to top widget Start--><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#rb-top").fadeIn()}else{$("#rb-top").fadeOut()}});$("#rb-top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script><a id='rb-top' style='display: none; position: fixed; bottom: 100px; right:5%; cursor:pointer;font:12px arial;'><img src='http://chrislorensson.com/wp-content/themes/yin_and_yang/images/layout/top-button.png
' width="50px" height="50px"/></a><!--Back to top widget End-->

 

Customization:

You can replace the following arrow URL with your wished one.

http://chrislorensson.com/wpcontent/themes/yin_and_yang/images/layout/top-button.png