How to add Image Back To Top button codes

STEP1:

Log in to Blogger, go to "Layout" -> "Edit HTML"Now find this code:

]]></b:skin>

And before it add this code

#backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}

Step 2

Now find the following code.

</body>

and before it add the next code.

<a href="#" id="backtotop"><img src="Image-Url" alt="back to top" /></a>  

But before adding this code to your template please choose your favorite button of the following And change the words in red, Image-Url to the button url.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuhcjyJhNezUuy7TrN5yuVDDT86z1sIgCBomvZPbQeOJ12tKhyphenhyphenqh_gPi9WablmN4xzTEQL7JmrhoQNvglu7JfjWM8YmtDfEqH1tVhn9R0mFgaUUKGm7MuZe1C0Lxfx_gY696WwRJY3S2Ll/s1600/bttp-5.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv7MeFWg_QWPp0fqmRXsyFWqh73aKG-7MKC-N2QfoEszByrrAeWB2Q4byTwBm_V0vrxYUk3lGMPSARk-qCwNMm4BEjyj_aIUu2_41FcnGFnypE2jA0Nb5Xxz_xdLoMdjbrd1VAPFwAuK2c/s1600/bttp-4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtW9Lne7gp7fcwkZy9PoC2jBGH7s1nCKCf1CpHPUm4lzMoThz-y3y4QTgtVqKCbxtNcbNR4WX0FCc1bO4Rp0sY_c2fGk0ExozlOt0zS0-0nuBlIhN1KeZbMV5dtDVmPYVZ0kosS_feA9GB/s1600/bttp-3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNpVpQn57aXQOo5j_fosx_d9hfrboM6PrJLskt1Sbpfke4Zw6sIPVIFeURx71_PnFHy9n0FuW3mt_YB90cITNa9Qp_ui6rNG6S-w5GTQJQnKMUmKLyWmEzu6TMXTl-qeSX6b6earJPfoMK/s1600/bttp-1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP_CGTfkjygOCRYwN9nAkNauw1qIQ6VzZn3MFTMzM0gDMmnkY2dQW2C6d3RSoBblznozoJwQaWrkhxtUogbRJ23IwuNVFGzGiIW1vMOnjr3zMuTedEAYBgpkOOQlEW54hSFYc9MAtgqRlU/s1600/bttp-2.png

http://4.bp.blogspot.com/_JwD5r652h00/SvDBBZGgr-I/AAAAAAAAAQg/1X96vgeWqaw/s400/bttp-6.png0/bttp-7.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAeirgZG-rGhgF0dyUoOO2Svwm0I97eoi0ICVSHjFJntfgg2yYktm5gmDFmf4e6MQ4REG2UMM483-XRpWr5_ZHS5zX86HUjn1PlesLf8O3M5ZxP_NyDKoLUC-o5C9vhyphenhyphenZwMl-fxUeCpPci/s400/bttp-10.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7_AybSiFuyHQe3WWRLjMCsWn4XoDEqOCi0H6BXTFg5kBNSc0aEvu7xWIOmGOj5BnP4drp46ik0ZMpq6hNNWGde0QwYTrJMK39qoquCCcFVFPjEgp2i66TCyubyhQfBp2dzY_KuCNGCasC/s400/bttp-9.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisgQ3qJ1q66K-QmtoqHiI_YIco9sB8O9EPDtrbWeZ8el8Hoch6gmh_NPNGX1jr-sL4uhVf1JkDw-cJ4PBsb710d3mQmRkYXIsscM1YUG9pn_Mz_wL-Tsg6-V5DwSHqJ8pclf8_4ldqLLGL/s400/bttp-8.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIFpr851dnYS1SfKCWnZWKLR4nGBK78yabf0ThBepmiZ7sMhN0qZO78Ns-mmSHXhVaAuFqqLWkRbEM46zPR5jFVmctaPYXapDqTv_WWJpn6EsaoX0q3HnWW1_JqSN_VsJNt3WkfRtqWniN/

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDcre8d2u7wETgCUL01nmoIriVOZc0w0DEgRNKkLKwkqWbQXaEi9MTGynBWY3ETkaAMMOLLzROboR5gQIDeV3-MMoYGAq2Ux-WD3FzjbCYW8cU_p1VEd4XTtHKgD-yXwRIWClsOqWnN-nM/s400/bttp-11.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiimY9xGwzv6bz0QI6T230hCLhww3vMLSF9IoWljKTI8wam6cUzxXhYluC-M2Zv21lMGytK-_PhuWVi9iBBbWEB2TvvBmoM1LYVErkfdwXOrg6rB8wE3lGOgiDOER_woaH0rFDFXdALjIae/s400/bttp-12.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbTfqnrcsZNqNyYN8zAywxj3AHANJ3mb8yOF8xl-fePF-LTnqEiSBTKDjHMfQRfFgsGXoP_GdkSuYVPocNdzdXB5fZYIaUGR6CZoOPLvLOeqkYSzmNmpXq_1mIzfSlsHrZXdRENPInCM-o/s400/bttp-13.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_3HjQz0aDh_T8rtUUzQZPp09mYMbHvD7uxcd01Yd7-NgF5cvY7OxWlWQ8mG4apDokkDjFHj98ffWpbET8VZdHVSWznZ3vl0XrKW-485Ih02Uhbuj7Yid8UB2_UNUsiCaP-3R_U_BJBPPq/s400/bttp-14.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpecYUdeP0u1MZRcE29TEL2Lv6y1wxv6MNFjbH_Mkc_ON0CzbV3AtUnMVRtV-8tJj5ksba2lVDJHqBkKVx2tKGGt-ufgOw7a_5XwDHqayLwhhdLmpO7XDEEb-4qM3EAawosA6sY7BEpW7a/s400/bttp-15.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT_KdGhyphenhyphenw8oMh8zyRe9LzvXx2EBthYP11cbyZwnIP_SxloChAsgDqv1Qf5OYhW-w2-keh6JAlPKuCBj9cd39hZ4uJFXuiGU0zfb2k9_vwsCV17MCfZZ6_jYOPkJMNlgendpbkOgEQvzxfB/s1600/bttp-16.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjljvVyoG7l5sTQWCy9E2yx_O4HzP2GgbWrYsP5ggCoXL9fl78tyxcflUYYJ-LE00fQ0z3UZviCrwwMDgbAC2hbWp-NSMzabAjp42WRtgE7G3WC53UoyxlfSztW99e-Rb6UNwOOK0U16H__/s400/bttp-17.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7e1KzFPkxQbs_vCvH8d8kFf_G__Q5_GGhzXCYCzFXZR6Y_GAVfLzlm9re579tA3zEGx8J51Zofs-gJLmQRizK7K-vAXZu1WmwWVcx-epNQSEpFvOnU4OwO4teJBL6Ua3sui1hRNzuD1ex/s400/bttp-19.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3W2Q8NvdDNgC2GzasS6EFyYTUuXX1jDTDSH4s50wR6DxELSjWZ4z0zAT52NAF3vUVHXLSvlWSJS24-mCCvUH3Sv5Liq3wVX88YCbseP7XZUIW9_3dfm8sEqQKoClNhuLzlmsi310RijpA/s400/20.png

After Replacing the Image-Url with your favorite button url, it should looks like this

<a href="#" id="backtotop"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3W2Q8NvdDNgC2GzasS6EFyYTUuXX1jDTDSH4s50wR6DxELSjWZ4z0zAT52NAF3vUVHXLSvlWSJS24-mCCvUH3Sv5Liq3wVX88YCbseP7XZUIW9_3dfm8sEqQKoClNhuLzlmsi310RijpA/s400/20.png" alt="back to top" /></a> 

paste it into your template code,




Step 3


Find the following code

<head>

And paste this code after it.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
type='text/javascript'></script>
<script language="javascript">
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
</script>

Now click Save Template