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/AVvXsEiViEmxiQWqk5astOLUu5vZlSc8to11dwOMuVUREpxd9I_78a1S2hTsRkKJLEzM0As6BACrc9pnxTFBtooCgMWQqB3F8zboF5zmdMBECWZdV1Q6b9UP1wWmapEI8s46o7WvwdMOOkypIp3S/s1600/bttp-5.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4tb_cX1FmywSWTLErsqskhuU6gqik88aayz2UM049g0mK27tGG3SjEj-KIiGWLts7EUieM7vua8ZMNcTiDmanWOyB2IkCAmTNTNyeP8vQG-3HMJ1Un6RWOQonzWbSJ-jzvw1RCdC_RyIc/s1600/bttp-4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZSri05P1cs9A-k0FCINHXdMeMWDUcI6kVAaKOUUxiPeYHzE92twEUfTOYL3CdOO_WdiVb3CokZ-L9VOb_MrLb7OnZSEM28MAfe4M_8vXpCKFqpS9gyrgztvf_OzpDhaW77KDrk2piuwCU/s1600/bttp-3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5CfY4EZaksNZUDleR7dVlBp2ZvX27vdIV4C9LMoIiAcMs5cEid1DPJGEAQnuKr6-_UuKmgeA4vXuGBBB_YwUTCFIeV678n3DzgdVAYwEn2GA4RcOXsIavAx_4h3CxgghXm4yXWpp7lWy-/s1600/bttp-1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqOmrZirSWdpruYXmabYMMQMHIaIWarDiRHlXxo97rcTTNKKtB-hfea6lPNZ84iVchyphenhyphenEehd0M2W5yY5gg_IEx98W5g5BlieUd4MYnW7DSFtqGqzqIFzFowPNBD9J7V44iwvZfS6zVfAhGv/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/AVvXsEhk4wlPX7YdC2pigx_-USl4aKQvWwAOOhqDjNDHgArY7sP1kXXVbu-UOIg76TIRI1oEQVeI7MAKTCsIv4BS8zMkjusKFEPOJajeG4twp_3pRMeGG-oTxPsaWrHL4vAghtbcM873Xs3M-vuL/s400/bttp-10.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxmivnUrPW1LBUTSI_Ur0hgpse-3CDXuU1MQvzltoYJ_FJvW48nNEmfI3tuvLnZZCCMey_booljOvI8d_5AGWqJwAuHXQTSO6ljI9oYPRnnvsZMoimnGdchJhBFKetS2NrJFiH6WS8wj8A/s400/bttp-9.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYw4z7aEgVNghHkvXxUsG5w9dd9w3d2jGaQlavn5Uy3YRZe-sGxsATwQPytDRs6UWMlmdA3Rp68ysWCrBa52SFdH8LSirylHFOIEQirlskMeJtFk4Fgyndc_V8etk5dS-qU0caqukgYfcT/s400/bttp-8.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm_zKkLQQ7zyXMd7fpR3XiXexw3ZPmxWgz96XpM0AIwnNDygIR4VR3L2dWy0D1rMwZSYH79OkEd3itecfEL-ApfmmOTJFPmOXdEwQM1GWGNt5CALRwxUR_vzat42u4yJKqnK5fJLSIHsLw/

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc0ztEck7GEkDc1BQSbjM7940FCXnpWkp38Gi2k-Fi4G-DzpyUUqTp57kxUxHluo7MgsPCu7ioRkltRwgfX7uTGOwBizuC2dV38A3m0yiiitg-3KgiI01dtAdalSJu0PIbB2DEDHgPE7Ed/s400/bttp-11.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi18h3rIk9DxlifpzE41z3US47rR233ThycnPWZnVH77iZnJQrOhazLMxgaNCNw8kp0pICKaTER_oBsrb6btPmWFjxWG-EUg0KH1vNANdK19174bE9KTpnxrYyuZqtYkDpYn1P5kLUeNlV/s400/bttp-12.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2ngLB62AHwABwP-Ig0Jk_YI-UaVL5yphfojFaEv0LKhDsdN1kGfpLx4YZJN4c0PrOyFWeZaAyasK2KCsAPWMkyYtCYuyVt-T9e_OjOlUM5rJMZxdqEGZqgzNPHu_xAJjuOcx7aSIcE3Cn/s400/bttp-13.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxa_vEnwwcrZpuKptRxNxioZDa5WzqejOk9jFchdc0F-LL0rUGqGTIrarVMf8q6qpuv5y8rwXwXgzn5VuPdVd1veWtcxP1kSrgjHMUtjecvAprEWthKTiWpp4uAdVHxzu31djTROg-uing/s400/bttp-14.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1rOch9lVG6TOWeLA3XBpYcdPqz55oDbXJbkrp50P5Le3i9yZEFQgVRnaba9BALrKFr_6YDDYFU6W9337k86dyXlCBzEzNdPHAMF5EWDvKhRyDoPkgx5eXy8LBJp1_cKhun_JwJD2XkV6C/s400/bttp-15.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiHN2DZmZHLUqxTYiBCGSOuTlx08CRXRKIhpaxlzDBE86I4wfoB8WOm7pSznqzcpDDuAu1-kU0ZZfzbFO9x_Br_ta4s5NPpSoA4rECEECqpdB97Wl0OZGCAb4nminXfFXxE75hL1vQZfSy/s1600/bttp-16.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGTTJlU0Y4gCKCowG4IA5ciPrg8h0N9UJ8OAdBho9f1I41ocEc4QRd9zy43gIa6GRWS0INewXh_fXHpFo-R92QUcBdZJTbIRNrNDlrkK-DDlffMMmYyBnIK6xQIjWJaiSK3aL6pRTAL4T7/s400/bttp-17.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvZOrKiWAZwZxXVPN_AcpO6EqMLWHZeI4eZETiVFOQciOy6pjd7zesdVbv-oOmjHO5blEWU6oZqjQXYl-UpBK0JKNLoYueRaHg20arwJFGKB5rteGFu2a73CQ9pZQs_rcT1s-psTQiJqWI/s400/bttp-19.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYl6RDUutu5g-HG8xAXL354zCx7fL3s0roU0lSv9aB4IdmOkeup2Rn7-OKpI7wvRKu-566i6_tjhoZAvSTOGKhAfqzoqioH5oeaxdXahbXUWIqr1bnhI11p-UABoiw3E9xxUq1ddJk3PNj/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/AVvXsEgYl6RDUutu5g-HG8xAXL354zCx7fL3s0roU0lSv9aB4IdmOkeup2Rn7-OKpI7wvRKu-566i6_tjhoZAvSTOGKhAfqzoqioH5oeaxdXahbXUWIqr1bnhI11p-UABoiw3E9xxUq1ddJk3PNj/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