Add Back to Top Button for Blogger

This is one of cool trick for blogger to create a smooth scroll to top. If you have lot of content on you blog pages, and if you want to make your blog to be easy to navigate for your readers, a back to top button will make it easy and perfect. We also use this cool gadget and if you want to check how it works, Go to bottom of our blog and click arrow button which is in right corner of the bottom.

For do this follow me:

1. Login to your blogger dashboard and Select Your Blog.
2. Click "Template" ,and click Edit HTML.
3. Now Click "Proceed"
4. Click on 'Expand Widget Templates' .
5. Find </body>  ( Press Ctrl+f )
6. Add this code after </body> 

<a href='#' style='position: fixed; bottom:5px;left:5px;' title='Back to Top'>

<img

src='http://a.dryicons.com/images/icon_sets/coquette_part_5_icons_set/png/64x64/blue_arrow_up.png' style='border: none;'/></a>

With change the red color > button URL

7. Finally save your template.

List of  back to top button

1- button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3c2NvYXUhhiuFxBaOWBBWI7MkNiM95D8zXDZkWRHen-cxcao6a6LPCBbv4dZr9TCRwQ3hhd6wBmoCrusx-qivDWAYGF_AFbLcDxVtrRrpsjiQnSaobe_tHJpFpQI4DMfJ0porUCV8Jbk/s1600/1uparrow.png

2- button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfZb_9sWA9kcG68XqTKOjzgND9WaPIEzwxHMgQea5Q7IGBq4bk7LpNf1VjsUpNJCVrQ0DyN7NASDXgaPgEBCNigEkS7O6i-UKVouEPhUveYEcEBGKxgt6X4O2TE0WKQ-kiXYEugcKE8rE/s1600/Up%2520Arrows%2520Icon.jpg

3- button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihE9snBbtRZBu6nGNQhHGh3WLg9B7a_DrCTqigHgMIr3KdrpNPrxxPyIUOy3NZ7ChMxWTCpmQrkHFaxa2U4pB5CFiajji7kzHvdUEO5Kcf5MnOiE9XBtF1O-jNu5EAOJ-4oS_KF7A5axI/s1600/Up%2520Icon.jpg

4- button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSpOm4QXMMtFpQvfZxW6-DclFspQBiU__3Uq_IPaLpNiW7gUb4AF5N-c5uQuEQLzMWd6vQxMC3aHPH-wX-8p8i8YARAkH3cs81CSbtmtI12n8YyCs8oIiZkD7cT2dieLdqj85Fg7BmAmI/s1600/back+to+top+button.png

5- button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9U5gsdzRIJqaQx_fgZkZSRRByIk2nPl2XXOo-IdxF56MdQBCXA-y8o_5A5-COkzG4BhPqhbQ0zLYJcYCuMQ_i760gahat12IySScOuuT05x6pRJ84vI5W7G6PyYLZZS0lFNLUcfO-J28/s1600/Back_to_top_image.png

6- button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRbxSv3JDH136nmaluurPuERSYFjtto3Uw5ovFhSPTq-zhp7oxFXWEhC-aehSnAbya7TfrlRjCvOVJRGLaxeYeLGT4vIK4-j3ae-kK8SfBqUg7Y3lKfPezu-7SLA8m0rBGp1GxkMSTKAo/s1600/back+to+top.png

7- button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHXGpxKw6rehTCLUQA7BCHeFeKYI3n4dxGNnrw674zPrrioHjv6B2JWEAggEhVwue9gWboHyFXE8a5610U4eYoD7PyqfAADc9W9dBseLOM_6qMktIiWYdnLz7zj2NZcCs2g7ICgj-7LLM/s1600/back_to_top.png

8- button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBPR-RoT11uIm6u3I39WQj3Y8Fv5TwY0C9e9Rcq6yRECZJIKnv2eWjCOvXsDGoCA1Cp1Leb5Y7rx5vI6v7ttgrjMn0JQEP4h63eKy4o_mnK6HTIi4ibGAMYdxFwUlaHLoF5BpaPlacVE8/s1600/back_to_top_button.png

9- button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbCcumgOm9QclBpf467ENiYR1TYm_wfrQSwelZ6QsKLcsBPVDs4HZvMY4i2HJVtq_omMCqW5IWqGgzYABntHxupLWtJiuPfKwq5oUAmy9aYUkuy6lqwbxD9rfSWHRZcB5BPnDFenmzUwY/s1600/back+to+top+icon.png

10- button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtbdlFx3tSLlLXMhOvN3Gp-_eAXngoSipUOF_SIvVpz9Cp2fap_Hg9KEngzA08qeIjhsJquoZGmCR0P6kpe_06DyqSunG0BIWbpxkmt0Wq58hXVG7o0OwWh8wUQiKg3AKcifdEDOEA6po/s1600/new+back+to+top+button.png

11- button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe6iEVjJDuJm2BSWl4hDytX__e1u1cQzhgI5HxgQMLUGmErIVg8vpalmu5qcpxasgvZG3V1KGDyJxvCeI0B91i3HvFAvMdbcZPloI_Nmfg9sdBx1QDQnEocICP0VjeviRdVi_-oHoAYtM/s1600/rb+back+to+top+11.png

12- button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsaKKWpYCfUOSDJnyJtQIzjroN6DXBsdMxtf5jp1U2c1lto1Ivqjol0ioB8SW4FxJ2fkPY7lBy3EmyB7w4zYSxUojr_yV-UoolmmSx-YF3kJwtCO0mTdgKm6XcUAzK_H6bo36g957qBlg/s1600/rb+back+to+top+10.png

13- button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6VGe5hxIKMxEDSOUzF70UM18N0oF-xrC4J1GZh7QWEJZ_2VMX8h3dnqDsErYh7AHzrjXOn4LMn_0us0zdbW5mT6G77vnbFr5gh-uC5zL8u0WPDpppp_HcNmUyFyThfV26n5jY6buB2-U/s1600/rb+back+to+top+1.png

14- button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvxqyqoYTn55H_HMzGBr8PU-Hzg3L-djqaSwns4ulAoByiMSE01HX1YA12Ahs_IU9ztudIaTd9FyCKzkCX4d1NUfrrTeaXWt01hXzCt6yju_0GngfgHkSWp340EfWPg9gEFxZMHVJL9M8/s1600/rb+back+to+top+4.png

15- button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_ORZQ43z2tS6x4XyDrxx-YiTPpOmei54aw8Ga9dqAsaUeKsA0vp_6ns5pHwRXL954nKGCLJ-R7CjwE_e4irnQinUbbJVCTFIlqTrQTiqoSYXm-moExCPNf9khvBZOZLc1xXQKUX0bzQQ/s1600/rb+back+to+top+7.png

16- button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVezAsBXB1EJsdBCNJiJSDdkMGjq_soHevBXfjLTCc0e5g75EHMO5-GYGj3PH3xb1gE_0yAsu4Zroppl2ZiN9xIHku7hyphenhyphen27sC68QVNDAjyn69sa9qY8wCYs3yKt9w-hA2u_bvd8NtUZmI/s1600/rb+back+to+top+6.png

17- button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYZk-3BiU4lGhx0ddwRLqGzSaAA4KjR58oeFM60UAfPQrInQqX1OQ1Cdgyv1i_Hr3VmZtUCUIaA9tiVJddQm12ji30YwFLNcVKflVbeI0JPR92PGJUXzG0N2gLLFuG1Ny6bCXrel8GhPo/s1600/rb+back+to+top+8.png

18- button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxdHNBvBu6Zbw441-sig6rEZhcgK_F9GszlZZ62GIv3kvN6-R4EpA7Ev2iqLzGlXvMNq03WuRig3w1g7gmMknfyUYIXB2vDrbZHtKfK2t5sO6ClBNxagd8iqX323MCfbdaL-s97S-4jeM/s1600/rb+back+to+top+9.png

19- button URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA1TDKDPFI-LDwB0EGRjWv6nc-_VubC1eJCg4YY65PW8dN32yAPwrsy4Wu_aLs_rd0EhigjOqDOEpJkyNp_mqer7haEyOySf1M90jFAOLJvCjd-Rv6lH32K1dT8YneErKFWp5iSskAoo4/s1600/rb+back+to+top+5.png

Anda baru saja membaca artikel yang berkategori Blogger Tutorials / Widgets dengan judul Add Back to Top Button for Blogger. Anda bisa bookmark halaman ini dengan URL https://bblogger-tutorials.blogspot.com/2013/04/add-back-to-top-button-for-blogger.html. Terima kasih!

Ditulis oleh: maz - Tuesday, April 2, 2013