Really Smooth Back To Top Button Widget For Blogger With Customizations And Hiding Feature.

In some blogger templates we get inbuilt back to top feature but this feature is not always available in all blogger templates and therefore we need to install it manually. There are many back to top widgets that are available on different sites but not all of them are smooth.

This widget is really smooth and here i am providing it with some stylish buttons. In this tutorial i will show you how to add this widget to blogger but also how to customize it and i will try to resolve all the issues if this button doesn't work fine in some templates.

Also read: Protect your blog with stylish Copyscape badges or banners.

Steps to add this widget:

Step1:

• Log in to your Blogger Account.
• Then go to Dashboard >> Layout >> Add a gadget.
• Then select HTML/JAVASCRIPT from the list.
• Copy and paste the below code in the content box and then save it.

Note: If above steps doesn't work for you then follow STEP 2.

Step2:

• Go to Dashboard >> Template >> Edit HTML.
• Press CTRL+F and search for the following code:

</body> 

• Paste the below code just above </body> tag.

Code:

<!--Blog Genes 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 href="http://bloggenes.com/"></a><a id='rb-top' style='display: none; position: fixed; bottom: 1px; right:0%; cursor:pointer;font:12px arial;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb5AfnfH4b7KpeGGP4JU-OLIqYUTNkkTm58Hdx71c7hcbkAtrHi3CWGofWhX5tYiJ3Ne0UHOW1Cp5S82HAIbMTb-C5fPz7BUA73Fcb6x_unxCMv0sRcjbh6PjVk81ImJuP25GUl52PaqDU/s1600/rb+back+to+top+8.png' width="50px" height="50px"/></a>
<!--Blog Genes back to top widget End-->

Customizations:

•   Replace image URL with the URL of the button you have selected.
•   To change the size of the button edit pixel values shown in blue color.
•   To change the position of the button replace the text "right" with "left".

Back To Top Buttons:

Arrows:

Arrow1:

URL:

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDILC80d9LN0fTwJzYI6AclHD1iAPhBAlPy3bmPqyMXgC1tupN2rQNddR6dDcA1etfXAZgeoT2yp9xKFHs2WPc4ONBEYIUwJ3vbdFrOYHL3O21PL_nl5Laq6ZQlAXKSP5FQn-cocT1kZY/s1600/arrow1.png

Arrow2:

URL:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfbijFQQ8VLIW6I6H88H0GPXZpibvh-ckQJLBPcTqrWil7LoyTv3DQUSxs2xQ0RNG8nkLClMDJ-p94Cl2WvwL5AIkYDXRDIYwAFRL7UBcZInXfLtypU_FBGxKUh1wW07wL0NDT1GjGS1Y/s1600/arrow2.png

Arrow3:

URL:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkzeZuDJH-07yQpLk74CG17dHvky9RHo-OmjVhG4DZ-YkE7IHWwcQFxDXWXcgQeMT-qBjZfxkIkJ5ElDKu7S8o-7AEOVdkEGFwPovroM-8yzrRQklBCwLbsf8YnKGJI6vsxiUDKipBSwE/s1600/arrow3.png

Arrow4:

URL:

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzcyrdKAYqTIhcfUDywYCCdV18k_lBZNU3R4IqQw3QtO14QMzIgkcQn5JZz6V0waonmTdMbT1wUnEVONPxTniPSvXFum68nhWLw2yiE15eKiMpmhGxeVNDr2gcLEFJfq8RiOcPJSAkoI8/s1600/arrow4.png

Arrow5:

URL:

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-xxJ5x0apz4fn9IScZthGgjHTlucBwhknTX_uPRhxDUNjbUu5hNXOUneCKxfsFbJK5wgKY0UT3yjIJkO5hz77_Ir_7vMMqFXlgosX1JY0Qh2YDmWUpiSZiLLinYngRTMGstPRYifcQ4E/s1600/arrow5.png

Arrow6:

URL:

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfnjaDNMppNEygBKlkiXAdRqyxbZBGyB6d5_g20yRhqPJK9enV1xYa-htHTWbO-RMbtZuyCYDaEi7ql8LTNLdWFNSpfmF8zGZTVlLC4TArlmE6nEai40nMFbJFIG8kreF32Q34xmFVY_o/s1600/arrow6.png

Arrow7:

URL:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0_jxdN-xqa5UOyl1Ht5wIL2v1Lk5NZHD64wgj2iS0TBmC4m2b4B8E5ZPjoVnmYe48Bz1Nxp9kL18TissSLVxO5k14T5wcT0Uu89-pThwYxa8xLYtZ6lqIug-oSYUom1moU2QgBqMMbpk/s1600/arrow8.png

Square Box: 

Sq box1:

URL:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX5aOk0pZkxVeMzwQRsao9cq2W-ioft0gi8Juoz0FkhY7SSJUHSBpIDt8wVZP7HU98RNQcpoDzP3hPnjONGaxA6MMw1egnbFQzDIXHjRjwF092fsfqVXyAzSIZ1OXNbZDuXtly4VD3N9I/s1600/square1.png

Sq Box2:

URL:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2cNtmxNS7V4dgYk9hwvEwW5sEVqkwgCDDdMa4Jdmpkq1ZNyFp7c51tlYKhpp7VXkpBnCyRZpJM7m5aoc6NMc5WWOiEr1JFH92iJEv4uX8TWZ2H_iXe1GNBUZ6bskzWp68sjNbWTED1lA/s1600/square2.png

Sq Box3:

URL:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6mRZCXDvmggbikuD-lgnGfoUAakFQITlkXj8KWvRlGWkD_hU8A3hJEeIn9Q0CJAuN7gKZhLZrWOhPOO0kjEMLN5ten5CMTRoDOP61hQ0-Ya7ml3DpAIO06Wnx0HvnB0lFdwy0cLOp3pA/s1600/arrow7.png

Sq Box4:

URL:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjjiaOm78rUGoTsAKfHuvcbt_TPt0es0e-0iIwwyR6JOt3mzj5VE1r-fmaje8V8Mu40at64GSsDKoZoXbsC7ehHfT70cmt4nX864HEES4nnFJEQUAERiMXrnDeFg589cdGi6EnEJIu1KI/s1600/1uparrow.png

Round Button:

Round Button1:

URL:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh67dtiNFMt7RvLdkNFqf5D3Gr0uuHKOk4yvivdgHacIiSeYp8siryiUolrFghRFAjd_1qSVB7woSvAj-eDZDJ9xOER-jh5Zohn9FctkE0GRM-J7eFCq6_Mb76cPIrUQyzcCo-nVR5s0U/s1600/circle1.png

Round Button2:

URL:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCsO75YM5h7iypVt47ReXGg-y-faVFQHZ-QJCNFpqptj3Wioo1BfYZ5uF_FMqfaEVFc2oNZnUiUsdMC9NG1yZxuBOrtukWOvnkfOm5tdcVixJjHbOg4-kPohDydfEy6-LmGldug0qKpSo/s1600/circle2.png

Round Button3:

URL:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpIYb_19K0lRN-yikAB6neNdae22zko0CW6rRZTLcLaaXGAviJNDGjS1xV3XDkU6BPBjU5MGR6am6fk9Vf8OvH0lSNN92-RKrW52h_b74FBQhlHotapI6CH2V_jk4MWl1jaVQOjLRe3Xk/s1600/circle3.png

Round Button4:

URL:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg22fzKcHNZjOofnTASPCDLBGOnGpkySu6cs9yQ1cxErpRdIyu_H3Xh51EEUZVY424ZnTF7GFXCPY8jQS-8MqqZ__YA_r8ux-ZJvMWl-ihLMYknkMQZXNrADvsa-fvNlsU5Ng_EYFG6Hqs/s1600/circle4.png

Round Button5:

URL:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAJVnndLl8DViPmZF4Tott1AAYObZ8LfuZvrSFMSPb-nyKq74OPeC8jHfeNjzXJON-tEK7aGLFT8uIFEIzKCiLrt8dX8ANhdLG7nw3UsJ76foy1eo6r-CQkPt7ezoBoaK_7XDi3oa_EDc/s1600/circle5.png

• I hope you will like these buttons. 

Also Read:

• How to create a cool multilevel drop down menu in Blogger ?
• Sitemap or table of content generator widget for Blogger - must read great widget.