Back to Top/ Go to top (^) – Friends in many website you may have seen up arrow on bottom by pressing this up-arrow you reach to top of the web page. You also can see this button on this page right side of bottom by pressing this you will go to top. It’s very use full for website visitors this feature save time of website visitors they reach to top by pressing this option
Without it’s very old way pressing scroll up button for go to top and it’s also take time for go to top that’s why now days maximum websites use new way for go to top button.
Without it’s very old way pressing scroll up button for go to top and it’s also take time for go to top that’s why now days maximum websites use new way for go to top button.
How to add back to top button in blogger
|
It’s very easy to add back to top button in blogger follow below given steps for add back to top/ go to top button.
1. Sign in – in your blogger account
2. Select your Blog in which blog you want to Add Widget
3. Go to Layout Option
5. After select Add Gadget a popup window will be open ( Add Gadget window ) (see in image)
6. Now select “HTML/JavaScript” Gadget
After this Now select (copy) any one html button coding from below given styles which you want to add in your blog and past in HTML/JAVA Script content Box (see below image )
Style 1
|
HTML Code for Style 1 is blew copy below code
|
<!--BACK-TO-TOP-STARTS--> <div style="position: fixed; z-index: 65535; right: 10px; bottom: 10px;"> <!—www.allbloggertips.com-- > <a href='#Top' title='Gp to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinAs64_nXG2lOdZVYryv33x7nK2gMcJywn4hWhBxwi5mGCq542rKV2XDtBwDaBHww6NZ10erUzTiI53AO72IVtMv0DZ9xwj1eL_Jep_1WbW5zNlY-g0aHU4nridTs2Dbgk-wWOIfzMXkk/s1600/Back-to-top.png'alt=”go" to top image” /></a> <!—www.allbloggertips.com-- > <!--BACK-TO-TOP-STOPS--> |
Style 2
|
HTML Code for Style 2 is blew copy below code
|
<!--BACK-TO-TOP-STARTS--> <div style="position: fixed; z-index: 65535; right: 10px; bottom: 10px;"> <!—www.allbloggertips.com-- > <a href='#Top' title='Gp to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4FB41Caa7r-KCMH0L6UJucnazn0mfapEn_bG3n-Bea7aADI75nPhkaCir7vdPHi0IrMb_r7TPQy70k5UyRtFjzhkNpnxEbGTGY8CRRuqutD5aajRWHb4gcR-lmJymj7b3_rW4XWUmqGs/s1600/go+to+top+button.gif'alt=”go" to top image” /></a> <!—www.allbloggertips.com-- > <!--BACK-TO-TOP-STOPS--> |
Style 3
|
HTML Code for Style 3 is blew copy below code
|
<!--BACK-TO-TOP-STARTS--> <div style="position: fixed; z-index: 65535; right: 10px; bottom: 10px;"> <!—www.allbloggertips.com-- > <a href='#Top' title='Gp to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi01tKjBSffYSfNbpFHAdgqqd7AIh3fqyXTnX6UoSvZX19Sm0CJ5zudo-xoubj_4UqJ3pB490gMF8cC1zklea6lpD4hmWqSVvKHvYDoQoj9-UMMNy1oVDU7WRjTKdzIc0lNIOlfAn0UVGs/s1600/go+to+top+button.jpg'alt=”go" to top image” /></a> <!—www.allbloggertips.com-- > <!--BACK-TO-TOP-STOPS--> |
Style 4
|
HTML Code for Style 4 is blew copy below code
|
<!--BACK-TO-TOP-STARTS--> <div style="position: fixed; z-index: 65535; right: 10px; bottom: 10px;"> <!—www.allbloggertips.com-- > <a href='#Top' title='Gp to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVG8asZAnshB8GbYhGSm7fFT1mQrZ4wEefRSVE9BeFEf90PV4pBCVRe61GQXA7B0Sy__lmRAT-lTZYHBhAbWc55M3oHtVmS8Fi2-cSPIPdWonWxTRkq84LXbDqCJPekAUYqMbUa7M6zDQ/s1600/go+to+top+image.png'alt=”go" to top image” /></a> <!—www.allbloggertips.com-- > <!--BACK-TO-TOP-STOPS--> |
Style 5
|
HTML Code for Style 5 is blew copy below code
|
<!--BACK-TO-TOP-STARTS--> <div style="position: fixed; z-index: 65535; right: 10px; bottom: 10px;"> <!—www.allbloggertips.com-- > <a href='#Top' title='Gp to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU3aZOtWExeURugFxuTL4tN1FtE9R_BdRNV65bz_YwMrRMCZkJrfsk-Du3hiwy5P9sgyMRcRZegDh_9XSgqsrTADsCldryh1yAfMtBfG3PKDNH0Ew-tspBsd7K8_n0pIXMfFXq47qg6_0/s1600/go+to+top.png'alt=”go" to top image” /></a> <!—www.allbloggertips.com-- > <!--BACK-TO-TOP-STOPS--> |
Style 6
|
HTML Code for Style 6 is blew copy below code
|
<!--BACK-TO-TOP-STARTS--> <div style="position: fixed; z-index: 65535; right: 10px; bottom: 10px;"> <!—www.allbloggertips.com-- > <a href='#Top' title='Gp to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCcrE-6CkYapMx1905IZhrnw2hV3stsiAkfI1qTcmFy2eld8l2J2NezN7b2Xj17nHpvGAOeY4KR5XX3BDe_In3ZdQ2nZujUynyxi-WaZr8_-WynE_-i14897DN_gZMUxgpuDsWtVkqGZw/s1600/jump+to+top.png'alt=”go" to top image” /></a> <!—www.allbloggertips.com-- > <!--BACK-TO-TOP-STOPS--> |
Style 7
|
HTML Code for Style 7 is blew copy below code
|
<!--BACK-TO-TOP-STARTS--> <div style="position: fixed; z-index: 65535; right: 10px; bottom: 10px;"> <!—www.allbloggertips.com-- > <a href='#Top' title='Gp to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEick5917DmNvaUJDA3X18z0OBGfD_MMZnzCSroD18JjsBIOV-ouxM5pKUTpc3k5LSlTxTKXXjiK1YTuxcP8GEJjzUyCT-B12_rggn9-G2SUtLt8wwN3BAJ0CezmpkdxednRjqkFHHd3Qgg/s1600/up+arrow+image.png'alt=”go" to top image” /></a> <!—www.allbloggertips.com-- > <!--BACK-TO-TOP-STOPS--> |
Not:e- You can Replace "right" with "left" if you want show button in left side.
Now Save arrangement and blog is ready with Go to Back option.
0 comments:
Post a Comment