Notification Bar

Jump to top buttons plugin you can use for your websites ( Blogspot)

Diffrent type 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 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 user scroll out a page from the top.

Different  jump to top button 



1)  width : 21 px  height: 21 of



CODE: 


https://3.bp.blogspot.com/-qkuDaeTvRZA/UVrkz5RQ15I/AAAAAAAAEMs/m1nWrDogsUc/s1600/bi-sbs-jump-top-button-image-002.png


2) width :  21 px height: 21 px 



CODE: 


https://1.bp.blogspot.com/-RoWLSogqUrQ/UVrkzxpNM3I/AAAAAAAAEM0/mxDPJ6UY2aw/s1600/bi-sbs-jump-top-button-image-001.png



3) Width: 45px, height: 42px



CODE: 


https://3.bp.blogspot.com/-6sgey74lpk4/UVrk0f02fiI/AAAAAAAAENE/OrX7YvAEbWk/s1600/bi-sbs-jump-top-button-image-005.png


4) Width: 48px, height: 51px



CODE: 


https://3.bp.blogspot.com/--epmicNpbCw/UVrk0VaQQwI/AAAAAAAAENI/j6kkjeWBCDk/s1600/bi-sbs-jump-top-button-image-004.png


5) Width: 51px, height: 54px



CODE: 


https://3.bp.blogspot.com/-8UYnM4qJ970/UVrk0S0satI/AAAAAAAAENM/ME7i6scodbY/s1600/bi-sbs-jump-top-button-image-006.png


6) Width: 50px, height: 50px


CODE: 


https://1.bp.blogspot.com/-TDcNuk53qRI/UVrk09Ql5YI/AAAAAAAAENc/6H4eU6agQfs/s1600/bi-sbs-jump-top-button-image-009.png


7) Width: 50px, height: 50px


CODE: 


https://4.bp.blogspot.com/-BKKDspBVzKg/UVrk1oSDYtI/AAAAAAAAEOA/tHsijtTt0zs/s1600/bi-sbs-jump-top-button-image-012.png


8) Width: 50px, height: 50px



CODE: 


https://2.bp.blogspot.com/-7-dtrCrZaSQ/UVrk2EE_bUI/AAAAAAAAEOM/mWFrtlD3Vts/s1600/bi-sbs-jump-top-button-image-014.png


9) Width: 50px, height: 50px



CODE: 

https://4.bp.blogspot.com/-qVE3ilRP-Tw/UVrk2BCwKaI/AAAAAAAAEOQ/K_2h5yQLPe0/s1600/bi-sbs-jump-top-button-image-015.png


10) Width: 50px, height: 50px


CODE: 

https://2.bp.blogspot.com/-JrqE95QtfOQ/UVrk2hV5bKI/AAAAAAAAEOc/fzr0ve-Yq6o/s1600/bi-sbs-jump-top-button-image-016.png


11) Width: 50px, height: 50px




CODE:


https://4.bp.blogspot.com/-TrmI8iSsp3E/UVrk4GB2o4I/AAAAAAAAEPQ/-pLXS2xJgfc/s1600/bi-sbs-jump-top-button-image-026.png

12) Width: 50px, height: 50px




CODE:


https://4.bp.blogspot.com/-MsqX_l7E9h0/UVrk5IcB02I/AAAAAAAAEPs/xeuHvsln-ZQ/s1600/bi-sbs-jump-top-button-image-030.png


13) Width: 57px, height: 61px





CODE:



https://2.bp.blogspot.com/-BcXdwAv2Xm8/UVrkzzqQqXI/AAAAAAAAEMw/aKqwYkesWSc/s1600/bi-sbs-jump-top-button-image-003.png

NOTE:  this codes above are only for jumpt 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://3.bp.blogspot.com/-qkuDaeTvRZA/UVrkz5RQ15I/AAAAAAAAEMs/m1nWrDogsUc/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. 😉😉😉😉😉😉😉😉😉😉😉😉😉😉😉😉😉😉😉

I recommend you to read these:








Post a Comment

2 Comments