RealcomBiz
Pin It

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.



Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

19 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Thanks i like the widget. Thumbs up

    ReplyDelete
  2. thanks i have selected 3rd one that,s nice :p

    regards,
    H4ck3r Cracks

    ReplyDelete
  3. back to topnya praktis dan bagus masbrow tx for sharing :-D

    ReplyDelete
  4. congratulations! these are so amazing! Thank you very much!

    ReplyDelete
  5. Hello, thanks for your code it's great, but I have a timy problem. It's not clickable in the footer area, it works from body area up. Any solutions? Thanks!

    ReplyDelete
  6. Ok, solved it! I just put the new gadget in the footer section and works great! Thanks!

    ReplyDelete
  7. thank you for sharing. I choose one

    ReplyDelete
  8. Hi, i am using this on my blog, and it works perfectly...

    I need a hel though, i saw ur social icons at the end of this post, and below that idons there is subscrice box, fb like button, twitter follow button, all very neat and nice, can u plzzzzzz tell me how to do that? plzzzzz

    http://ultimatesqs.blogspot.in/

    ReplyDelete
  9. Awesome blog! No need to go searching for a back-to-top image, then uploading it to a photo site, etc. All this is done for you! Excellent! Thanks.

    ReplyDelete
  10. i use it for my blo :D thaanks

    rizality.blogspot.com

    ReplyDelete
    Replies
    1. You are welcome Khanafi. Glad that you find it useful for your blog :)

      Delete
  11. Hello Durodola,
    Thank you so much for this, I have tried others code but it didn't work for me. By the way it wasn't clickable for me until I put the code on the html of my template page. It didn't work for me on the add a gadget section. Thanks again!

    ReplyDelete
  12. will not appear fixed to bottom corner in internet explorer...!! Any help would be appreciated thanks

    ReplyDelete
  13. Cool guru.. check out for more on www.craplore.com and drop a comment over there.

    ReplyDelete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger