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.
List Of Back To Top Buttons And Their Url
BUTTON 1:
BUTTON 1 URL
BUTTON 2:
BUTTON 2 URL
BUTTON 3:
BUTTON 3 URL
BUTTON 4:
BUTTON 4 URL
BUTTON 5:
BUTTON 5 URL
BUTTON 6:
BUTTON 6 URL
BUTTON 7:
BUTTON 7 URL
BUTTON 8:
BUTTON 8 URL
BUTTON 9:
BUTTON 9 URL
BUTTON 10:
BUTTON 10 URL
BUTTON 11 URL:
BUTTON 11 URL
That's all, hope you like all this cute buttons? we like to hear from you, your comments is highly welcome.
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
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEZpOdm_WZvti9oRcETMx-TAHvcozQF9ajyj9nOocO0MJRyHNl6OPE50nz5mBiZGBXz-TLCDZH_AKKy1Gz6TRfdwe7aI4CkH5sqRLaB8f9rb_BdmoueMz1yLHqgoEsyMhB6kC7eSyUh4u4/s1600/rb+back+to+top+1.png
BUTTON 2:
BUTTON 2 URL
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0tQIiJbnVsGKf7he6XeW19HfEoP_YMEcc_oB84F6zEiIjL1dtibOG4atWZSjOACLVXplDNUSAx-jBR9kjVOJ0LNvrNl1wq5jOSXAldruaqd_hFj71zEglu-Hhmk2YgqAlShL3YlkZGt1w/s1600/rb+back+to+top+2.png
BUTTON 3:
BUTTON 3 URL
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0kwyqB2hpNHaYeneFPaMtPx_aIOpnZjOtd3wE6dZp9Bh_szc6nAkvBLEbtTBMWZx8I1j9m8zSldDGu0-CotWDJ8UUca50W-a4Cohxy4X98pPCFsi1S-IEpEv6UvQVO9DGOIRxhgEd2z8P/s1600/rb+back+to+top+3.png
BUTTON 4:
BUTTON 4 URL
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj9TNiSnzrB6wyfY772Xwu9S73MwYIWU81EeFRwIxvPaJPZx1UMwAy09U_qSTzfITDnX11nnlhFmLDVLCej6xBu9-vgiJ85Bft91cdFuB-Mxwh1P9RghgavRPaEg-uTIrv2tEherd4Ua58/s1600/rb+back+to+top+4.png
BUTTON 5:
BUTTON 5 URL
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsdPRH55ypSD5k-2zRl5u-RQesHpioffgorK0I2hNnlIjVr4tJPUlYh6QsH5Ldbo6iEgNZnlUqxB9iWYKY5AUyDeBBtUJ7SJGzDEPCgLjvGIcUgNTVbNfi23-vCe_fcXqX2pXSITLeeef-/s1600/rb+back+to+top+5.png
BUTTON 6:
BUTTON 6 URL
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCRnGDXKf5FqJ3oGebSd_iNzMOvT0Pv1HzKgYcv3UpeFipGQOUsCXGOsJc9MVtoqvcIAUVNrMWxDpeW59t2DOp6VzZeb0wYQornw8Q2o_Wej06ovIbFMTANrY4W6Qrfba88YFm7uaBnAf0/s1600/rb+back+to+top+6.png
BUTTON 7:
BUTTON 7 URL
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih6lhT-j68jYbpyiMmdHpTx5-qRyoTPPs0Dv2vaKkObhiUr0UbRYoiVGA3_bJc0FWBmGCW41OpIC9N9UZjPAIpi9qBBtU0s9T2B9V0TPgJcNef7b0cHMNfMhfk2yt4IcZlQxTdR1aBxSd6/s1600/rb+back+to+top+7.png
BUTTON 8:
BUTTON 8 URL
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGflRyXzpGPjtZGuysNqYGJGHyGIxLm-wnI1pnrZ3mHW2RJ0PX0F-TXQWNm6ZkHwqLKeTf-gwCayJ9Jn1mbNrUfxIUavQJSft16Q2kPBOxue314rhYymKLYov_DX711A3goECGUSnfpxan/s1600/rb+back+to+top+8.png
BUTTON 9:
BUTTON 9 URL
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6iLDycXC60wCe4anwRBHKFQ33rRg7_-FlBa5HyJWBxblWW2Bpi-MLxMVi0S7p9OMlvmMVRU1csVUeIdRTXbVI9uMvn05JNx_rCPV1EURQOMa0TvG26N6BDosAgWmp7lNwnmq6wQr0Mbf1/s1600/rb+back+to+top+9.png
BUTTON 10:
BUTTON 10 URL
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirJGwo7jz4qh37R0kAPBDGg5W4ClKNcvMXNBIj6Y5_cmzElmFLeS4qafB406LaV4SGxSkwNj6IjS1b7ZPfF5bau0cF9NDuxgSwZju5gZC8_5ds5SwVe3rsO3d0AiapHJbxNOu2Eo85Qygi/s1600/rb+back+to+top+10.png
BUTTON 11 URL:
BUTTON 11 URL
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie3TbT7jT6GK1n_iXykyyaoFP1OTWbE-Rm-Or0Sxjp79wixz9YEo0PQUDMGNas8WSHIYVbVM18idIQTuItVm2V3A2ypfZgs7uG-Jbo8vCG0fn2Pc4OE0SB6eoZkYgKqHpqFZpyBZDuWhtL/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.
0 comments:
Post a Comment