Jump to top buttons you can use for your blogger websites - Technology | Business tips

 

Different types of Jump to top buttons plugin  you can use for your websites

It is very necessary to have a jump to top WIDGET on your websites. Not everyone has the patience to scroll to the top of your page not to say of a website that has a lot of content.

Still don't get the usefulness of the jump to top WIDGET??

Let check out the features.

1) it is animated scroll to top button

2) it allows maximum customize,  with many options but, you can use the default if you don't know much about it.

3) displays only when the user scrolls out a page from the top.

Different  jump to top button 

1)  width : 21 px  height: 21 of

CODE: 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiblxcagTVAoY94-AlOF2cKGP2SvWH2nUhuDG0_wmPnzB78mh8EKyW6HsZhwipClpGBq_T_6kur21HeBvhyphenhyphenCiiWT2Okmcu-mtN3DQH1L_jXChhoV4F8U2UFMGh81roeJx_W2XszGiXtMVQ/s1600/bi-sbs-jump-top-button-image-002.png

2) width :  21 px height: 21 px 

CODE: 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSDPfE2jDeEZDXjsPyd6dQ540tHbuEY5mmNHTB-axvo5RoSvl24L4OptUY-J-Uah-rswQ1nS2LDDXY3Lbe0PjINu9LfGO9ZHYG_tGyINpansQUhqoC-mv0FK0J6NMGt0SNk0-yIxz5kSo/s1600/bi-sbs-jump-top-button-image-001.png

3) Width: 45px, height: 42px

CODE: 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN-_c6-52f0GrujDh3pwPfXonq-hstEtVhjG_RBM7DsRrQ8VClD7qwDLC3guHSvW9qKbfe7Js294ly4dnk3BnFZFqaAvNHFfSCf-omhSijHMwqqKwn73SZGfDgefsmoTANPWISpK9ovPw/s1600/bi-sbs-jump-top-button-image-005.png

4) Width: 48px, height: 51px

CODE: 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxdV8KWmG3jBylWRTflKJ9LWvIW8F_8mmzbbnjHpCwAVRVB9dlTyrI1DkMJOBDhIyiytpFNJ6w_5_18lxdFTCNYl4pN3I3nNFVpUhm2UH4dRTFBswZ-0QYemYp3jFXyOudce7H-4qJqco/s1600/bi-sbs-jump-top-button-image-004.png

5) Width: 51px, height: 54px

CODE: 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP7hyphenhyphenDiD95YP9jHs6Xlyz1_QbxSV3AwxlwYmBioodgrYP_-SzHRofUo4mtV0jN4SKjFRATYIx3K7wvH4U4sBN-PHF9oF9MwBB22ayts-8tD-rJxoSxFLX5O88Z-eRxMkWr_Y5RyN4S1Fs/s1600/bi-sbs-jump-top-button-image-006.png

6) Width: 50px, height: 50px

CODE: 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicNFcXfvFPhDryYhyphenhyphenSVOzELApXCCtQE6mtpLTR8Rc5LPq6jQUX71C_Iw993VQL54ik5n85TnQeA59CHmY-m_Gg-pt46zA6Ch_kxio6PcRdKOOt22iVg3TIhrs_rrGXDsJfSlS3XQ2LBo8/s1600/bi-sbs-jump-top-button-image-009.png

7) Width: 50px, height: 50px

CODE: 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5ynmvOJ8AEhhjlXsFNpwbAXbjXq5qEnOjGCj6n6LClfhjEX82Jojn5zhcFb51xQePFxxzIgdAgIM5D-oHqecC6EZ2_UtETxocyPqVaNIA9kzCbFzGLl7Sn6MO8XDS3JDZp5tcon8LLCU/s1600/bi-sbs-jump-top-button-image-012.png

8) Width: 50px, height: 50px

CODE: 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZkta8b17EqZKqZKn3xRLn00nSAt28CiM9zMHqaXIYX8kvh3GGcIYGrrHbFDNv6GZArqrWBpI_VbSL0sT4uiHYIYDR79mjJcm7Q1NID-JtNifGfRxS6qDZmB2_JdgUTpCeq8rO2Qrf-1o/s1600/bi-sbs-jump-top-button-image-014.png

9) Width: 50px, height: 50px

CODE: 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijald5lijQnVeRPHH6MwyxXdQJzvIThWSWAdjcfCRFkKLnb5md8EJaS04lfsE5q_jA6CNZIqhGaViL25t4n9f4OpDbYtt1Deb5lGLtcd7vb-uKRRxCYceMkH7K3G5Sy2E0rWYpdhrpD3w/s1600/bi-sbs-jump-top-button-image-015.png

10) Width: 50px, height: 50px

CODE: 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRqfCwAGBqzV77EdNKl5ZEcsqL6r5ZU46lNS3yJ4oD6J95ybZyERx9_b9zyvzSy-S6dCu_EFRGyEqOWZZUe571RLTsPLC1liHabM4Pm89rkYWwY950Ql1MrCPNAZsSksMaDMpRt8h4CGA/s1600/bi-sbs-jump-top-button-image-016.png


11) Width: 50px, height: 50px

CODE:


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-76ZIeH6LB492R22uj8xL5p0D60uuUSyhW2FL7jbj2A5A35sPMOIu571HfElmSgPNIoj5qGHsq0b4WtOjxScp8I3qSDtfLkiESutx1WPd8nezkfDC_M5Tb7Qd-v9bq3POo8Fvij5Ykb0/s1600/bi-sbs-jump-top-button-image-026.png

12) Width: 50px, height: 50px

CODE:


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlXtFWmldMpqKDgkThbQzGKLRm3S90TN8twBuZATyfghdQhvbP298K-cqNMFaEzaDOug3Z8aoMXjbFkEtgTV7PAhyD9ECpKuizwRVLF1_fk_Nsi5ccjOpYj-VuJzyQnvJ0IfD1wckSV6o/s1600/bi-sbs-jump-top-button-image-030.png


13) Width: 57px, height: 61px

CODE:



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib4aMKdH7DfHsc-IuAt6WQzVoL5HjUYXimSxoKujLxJ_hPis9RXtQq5f05q9eEvn90_l5TJRs6djmyJrl-wNt0-QrcZXiKpn_3kBV4kBQcaVNt7ZmCdIBhka7eBOaIPa5betm5ph2iR7k/s1600/bi-sbs-jump-top-button-image-003.png

NOTE: These codes above are only for the jump to widget style  ( how the image of the widget will display), check below for the code to make the widget work... 

HOW TO ADD JUMP TO WIDGET ON YOUR WEBSITE  ON BLOGSPOT



Login on blogger.com, go to layout on your control panel, and add a Gadget.
Now choose add  HTML/JAVASCRIPT. After adding , paste this following code :




<!--BACK TO TOP STARTS-->
<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;
" href="#" title="Back to Top"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiblxcagTVAoY94-AlOF2cKGP2SvWH2nUhuDG0_wmPnzB78mh8EKyW6HsZhwipClpGBq_T_6kur21HeBvhyphenhyphenCiiWT2Okmcu-mtN3DQH1L_jXChhoV4F8U2UFMGh81roeJx_W2XszGiXtMVQ/s1600/bi-sbs-jump-top-button-image-002.png
"/>

<!--BACK TO ENDS-->




To change the image style of  the widget, copy  any style code you want at the beginning of this post from 1- 13

Then replace it with the blue part outline above.

If it worked, it will look like this.

That's it, we are done.

If this was helpful to you, comment, and share.

Related Posts