Today we are going to add a animated Back to Top / Scroll to Top button widget for Blogger and blogspot blogs using javascript and jquery. This widget makes it simple for your visitor to return to top the page in a special animated style by just clicking the button, which always remains on the right bottom of the screen. There are many styles and back to top buttons to choose from...
Common Steps for any Styles
Log into your dashboard. Than go to Layout , now click on edit/html
Find the bellow code
Find the bellow code
<body>
and replace it with this code
<body>
<script src='http://files.bloggerwidgets.cz.cc/js/jquery-1.3.2.min.js' type='text/javascript'/>
<script src='http://files.bloggerwidgets.cz.cc/js/jquery.scroll.pack.js' type='text/javascript'/>
<script src='http://files.bloggerwidgets.cz.cc/js/jquery.easing.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$("#toTop").scrollToTop({speed:1000,ease:"easeOutBounce",start:700});
});
</script>
Style 1 Back to Top with Text only
Be sure you have completed the above Common steps
Now find
Now find
]]></b:skin>
and replace it with this code
#toTop { width:100px;background:#f1f1f1;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }
]]></b:skin>
Again find
</body>
and replace it with this code
<a href="#" id="toTop">^ Scroll to Top</a>
</body>
Save your Template. check the new back to top blogger widget
First complete the common steps on the start of the page
Now find
Style 2 Back top Top with Image button
Now find
]]></b:skin>
and replace it with this code
#toTop {position:fixed;bottom:10px;right:10px;cursor:pointer;}
]]></b:skin>
Now find
</body>
and replace it with this code
<a href='#' id='toTop'><img src='http://2.bp.blogspot.com/_Mje-lwg4sv8/S-jZyLcLCPI/AAAAAAAAAJA/BmXjvZRJJLM/s1600/up3.png'/></a>
</body>
You can change the button image just replace the red code above with the icons code bellow.
http://4.bp.blogspot.com/_Mje-lwg4sv8/S-jZr6cFtqI/AAAAAAAAAIw/Uht7x2MVD78/s1600/webdev-arrow-up-icon.jpg
http://3.bp.blogspot.com/_Mje-lwg4sv8/S-jZtve2HEI/AAAAAAAAAI0/s8soyvi23dA/s1600/scroll_arrow_top.gif
http://2.bp.blogspot.com/_Mje-lwg4sv8/S-jZuy7d_jI/AAAAAAAAAI4/0oKyKI_gjQ0/s1600/to-top-button.png
http://4.bp.blogspot.com/_Mje-lwg4sv8/S-jZwhGGv1I/AAAAAAAAAI8/gYaWPVxikA4/s1600/up.png
http://2.bp.blogspot.com/_Mje-lwg4sv8/S-jZyLcLCPI/AAAAAAAAAJA/BmXjvZRJJLM/s1600/up3.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh66khk28ZX-esWbujKmPlajeylGQyGOhZI2iaFzYRL9J3pfbi6yrs930QCO0R1UQWlZgkfNLvfKLaFvODFBItmAQlPVaiUynQhCUyre2nGkfpLibXLlp_HNfcFf7FnA5xSfrPH3vaufDZY/s400/bttp-13.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7h1bUXzas9ePyh02T2sQcqwq9512gSrVc4LJn7PsSMXgzx-sT8Fc2AZe7xG2RB8RAcTGzEnxE3sTQXFOSLWTDo_pj9n_ruptIa_-jVtIdXqW6vrJaZaqrAL4Wc9HHQZlkMYP7jpILkQtr/s400/bttp-12.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL4oV-25opGMtPNl-keNcngVqF1eCWMijQqIIp4DpJUjXFJh_EX7aIUYzEBNucQNvgJj4pwXByR4g8dFC-Vygll4kJJdXUs9dgT44w-fc9LhqY18c_FeHr-rkIGvLcd6z8GVEKxObGP-0e/s400/bttp-11.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8VajfBfEnigpLuPhaKVHCmmX4e2QjGegfKAZVkrU8cu3kTFRU2CQMB1Xle6Az7XiynekjglXFDbOZxKnl1_nGM0bW1zbZOBKpuz-YsDECCaQ-Y0tsoFRywPnW4hvkQbj4kLuXo0f2O2U-/
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj15MhY5UDs7ZyrPAa_ITbTdcs8KnDJ6JkGTlCX3BXuc0nsV_VoJ1W59sPrsOiRrcd4Qv3WP_nX8Af28sAvAIRAWck8VEx-fuZhxj3d4MQKpgWWYDR9xfhxh_Nv-aOAuR-aBwdefzGL_joW/s400/bttp-8.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrucGTFHd5-UJdOnz7JeTlaz9-awgwhM96WElNa8gBGcqkWXscxmK90mQE6cCQnsMvEfD-z78gpvpDK30dR70M_xBn9mpmT0dD0pdytXwZ_AhO30GlA9sC9CblgMwlbwMgxujXW-Lw6eg6/s400/bttp-9.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfquLqnZYSzga1rfHVRLkCrB1_mxQIMG74YjrQChPG8iRjRq1cVrU8tQSDeH5i96nH5BzkCPT7pqG9Uoeh5NUzBqBYBYlpgOFEP7T7ONQhlyeBIg4j3UXSSjBwf_lu-6ji1Ds0-nKy6AJv/s400/bttp-10.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiPiYS1zZND6QCiSUr6W4sgI0I5YwmrJm7wE30qyy1KtYnzEl6JXBhcrAhV-lS3S_MbgyBi0ZC6d26AMmeFv0QlGs2Omo3BWsYsjeBqug1Syb2o5K9wtQt3PWpd6vq-mscABKX1sU4luoK/s1600/bttp-5.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiECnwDJ7OqdSj5OWv_syQZYS3BqV9fLIFMGoCpBcOB3lT8oyEzNfIQdg1AZSmGNgBGrWbH-zNZRNPdVJp_Wo07-_E8AL0jjYi8w5sooafoIneHuu1RYKdjCxXFKUi3Hs6-gnvMuDaV-1lw/s1600/bttp-4.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtHvcr9mnPl8MmuE7wOL0SjBWe0yw3-uJFI1J3u2QNLv2NyqMLk_-zhvcKGUxp9vf6I0XGdPQ-UOgDyQCKr-GiR2YoDgo63YIjly3AR3NoMs6Q-iMqNZExltpQv_0_-0sRRJFjWkhLIv1G/s1600/bttp-3.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY1RvC-vsLB71xDCeLJ5pK3SPhI3ZbaluYgOoOgqex0CdkewvNPfeAtivbx2hNyWAFpGuefDd21IPpHSLWV-fxwOR462Dwttlq46JPJxsrdThCZ5zQchrtN4lQtcJr-MmS-nvcZv0yCXwo/s1600/bttp-1.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLvOu4Nl4GHIb8uAOAlcSlQcKiz5pdtRzkoJ9mvlzPogqIq1Zb1BubmX_edyq3kEcYUnxF2YC1jIiiZqZPZpb8sNtSRp8oWEa0rbNjmA_FeV1equ-QekJo0obkMq0OOK7expnhnkCiVUKM/s1600/bttp-2.png
http://4.bp.blogspot.com/_JwD5r652h00/SvDBBZGgr-I/AAAAAAAAAQg/1X96vgeWq
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKF-R_NOMPIm4cCq24xsQu82gXj2TN4NC0dFrsSCowplFHDu_QtwFkNbI3EdeEhNXcdG1FRz54HvNoM8THi2AhVOeiYFUUfninsT0Kdi3jJlbiBFzddtYUMlUmYDMiC5LXeiPPW9t-U4Ld/s400/bttp-14.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgim0egwtbqwFts8NJtblFX6pCA3IncteEUgucpbnhUiGAkMw4JF94xq9zMhcXtz7dbfEUAYpbBiX8pe36x-E3b-S7qrMfSRjcLVVBsHVbM_9P9UZ2cfd8mNC-MO780_Vtf41R6Fe9PS2Px/s400/bttp-15.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxFwt2KqzOEaCDjmDXbR0kukMrr8jsVIAjI5lWuA0QQgG8dqOUeVpOl4s5gPop6H9EzthtaNv2r_9EhVi9Z2Efs-OJFdAOrCeVv0k1QPUE9x_GpP-Cood75qI3XUEotozTvkO1iJE0cCdx/s1600/bttp-16.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmuMgFwyegi8XGuIuEWCTR5n5-Tk6EUZnARndCBka4sZaz_9oce_Fv4DjY1sz34EgHRDCj-2BpxfNdAJzkAP1kAQ0LzcgLPgIy59kN5zNiVFNv_C_uRxwIteBC6i2EboTTpTPN3SYY-h0o/s400/bttp-17.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9PwyvB7Z_rNHYoSIpjvHMsJK3UR690q9-lMzlWdZnZnbbFw8cT_A5-RJTTrjoqSkwS0Qo-J86cGyg09KsOlWXz2tSHIUroqcOKXswYlIwgdhBk4H8veOQxKSc50F4pTYsMgGwSyzbqnpr/s400/bttp-19.png
http://2.bp.blogspot.com/_JwD5r652h00/SvDBmIGbP3I/AAAAAAAAASI/cL5okLpz_C
0 blogger-facebook:
إرسال تعليق