10 + Awesome Back/Scroll To Top Buttons Widget For Blogger/Blogspot

Today am sharing with you, how to add a back to top button with smooth jQuery effect, this widget will allow your readers/visitors to move back to the top of your blog with just a single click and it appears when readers scroll downward.
I have created this button in different style, what you just need to do is to choose from the varieties of the buttons that best suit your blog.

How To Add The Back To Top Button

• Go to your blogger dashboard
• Click on "Design" > "Page Elements" > "Add a Gadget"
• Choose "HTML/JavaScript" from the list of the gadgets
• Copy and paste the code below in the content box and click "Save"

<!--RealcomBiz 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://realcombiz.com"></a><a id='rb-top' style='display: none; position: fixed; bottom: 1px; right:0%; cursor:pointer;font:12px arial;'><img src='BUTTON URL' width="50px" height="50px"/></a><!--RealcomBiz back to top widget End-->

• Choose from the list of buttons below and replace BUTTON URL with the url of the button you decide to choose.
• To change the position of the button, edit right and replace it with left if you decide to position it in left direction.
• To change the size of the button, simply edit width="50px" and height="50px"

List Of Back To Top Buttons And Their Url

BUTTON 1:

BUTTON 1 URL

http://2.bp.blogspot.com/--u4WnPHhnKI/T_ll2USSVXI/AAAAAAAAAjg/T4d-U8MNQg8/s1600/rb+back+to+top+1.png

BUTTON 2:

BUTTON 2 URL

http://1.bp.blogspot.com/-mkWAywrbk34/T_lngxqOtbI/AAAAAAAAAjo/O4u5l0belP8/s1600/rb+back+to+top+2.png

BUTTON 3:

BUTTON 3 URL

http://4.bp.blogspot.com/-tk4vfkGD35A/T_lotWXXISI/AAAAAAAAAjw/ln3rm57w1og/s1600/rb+back+to+top+3.png

BUTTON 4:

BUTTON 4 URL

http://2.bp.blogspot.com/-n8KoDOTU-kE/T_lp79A_uOI/AAAAAAAAAj4/7qzRDSeq0Qc/s1600/rb+back+to+top+4.png

BUTTON 5:

BUTTON 5 URL

http://2.bp.blogspot.com/-6PmSFEkahkk/T_lq-soYWDI/AAAAAAAAAkA/Z27VV0gEGeE/s1600/rb+back+to+top+5.png

BUTTON 6:

BUTTON 6 URL

http://4.bp.blogspot.com/-YekC_iFV6TI/T_lr-aUV9-I/AAAAAAAAAkI/rJNbG9fYGks/s1600/rb+back+to+top+6.png

BUTTON 7:

BUTTON 7 URL

http://4.bp.blogspot.com/-Tqk9j1aAwKI/T_ls9irVuLI/AAAAAAAAAkQ/qL_RswP2DtE/s1600/rb+back+to+top+7.png

BUTTON 8:

BUTTON 8 URL

http://2.bp.blogspot.com/-lJ3KriuHV98/T_luCw1I2JI/AAAAAAAAAkY/8x8SXw5Ds4s/s1600/rb+back+to+top+8.png

BUTTON 9:

BUTTON 9 URL

http://4.bp.blogspot.com/-rmWGlx1Cn-8/T_lvLVYG53I/AAAAAAAAAkg/WSqJl8_9Yh0/s1600/rb+back+to+top+9.png

BUTTON 10:

BUTTON 10 URL

http://2.bp.blogspot.com/-jyq9g8KC7Pw/T_lwJp8cB5I/AAAAAAAAAko/a7hKHNfYuTU/s1600/rb+back+to+top+10.png

BUTTON 11 URL:

BUTTON 11 URL

http://2.bp.blogspot.com/-hWTnxeK7AUM/T_lySteebyI/AAAAAAAAAkw/F7Gj_imwYhU/s1600/rb+back+to+top+11.png

That's all, hope you like all this cute buttons? we like to hear from you, your comments is highly welcome.
Share this article with friends/followers, and in our future post, we will be publishing a lot of tutorials on how you can spice up your blog using jQuery effects, and for you not to miss any of this, simply subscribe now and receive all our latest update directly into your email. stay bless till then.

Enjoyed This Post? Subscribe For More Update!

Follow @realcombiz