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/AVvXsEgBGny8ysiq8rTZD2Fm50TTG49G_kh4g5OIxVA98DG6xnCab0i-t51HdTog0lgDIj7OoE_Qbtf3sCaOI0amjJMvAODQMX_X3pcE7OpXUpuLXRdOP6nNfZ94l6IS7uwA-7acGPj7tsGrooHM/s1600/bttp-5.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHaUHcJl2HKPTldPrPw-sNLfLtx48wWqQI7chUY0FkkkbmwBrASGxnnmtKe_oHBmR3n_sNJKGX4j5fK1MN2ZMj50s25XTxEeOwS10yZmjNq9h36xJsxlEXcoORiMrP1SROUpyOfA1QoOip/s1600/bttp-4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWJu73BZej5AutkTE9Swh1TeaxAgGEkIWyusKWvc2o-CJIRI3Wgr7CMJizP3kqdtf3adFN3PUYsJJ53RRK3Jk53AG_ZOBXOfue2hT0jTFI5cyp7RNJMhNRq21vuM3EibEhBJFYjH0ctjHD/s1600/bttp-3.png

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMYwirH3mC7HbiJTKTwTPGeyKqmDIWKWDUYl3DnURkek6ysCh9N9tKmxCfiCNm9Ef8dzGzeiEVlfm8Kx8KtfiDn3qFL60yHaQ9Ex_Ag3GHIqmsr1m5OqeVwrpeBKf8VKz1jJ4sECmcRHcq/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/AVvXsEhLnrpV1IcjBniKjGQ_h4QZ8SJAdc3yY4TilhRVS0nIdP-JLZdVFUOKAEzOlg8lbCQb7BEsCqYJToZVBQJm7nElickOKNxy3nIOgiwsEQCbs7lRQloVHPQ-8LYn5TjL7VfSREDU93DM0z8B/s400/bttp-10.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Z5ZTlvW6qNkYMsPwpZA14-agYcL8FgKiGFPLjxwVL3trFzrgKTh4wHr_-pLkKJnFLVGN15oaGEQe9ZKwoaQmr48-PfuWDUG0PdH7zJLiVnSju8zUoxsBh-a7hhsLWukHvNqVJY3J0_TD/s400/bttp-9.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc5Zp4pjgLRcshnrT8tU_pDK2AezF26rLARMTLX5ViZrxLKEwenkiKg2zn_47G4quViQXw7rs1iS2GhOtDPm3b7AnqSFRUB_0hNmOlrF4aiVTJdtteGuin8iKis_GURpQrvZ55R12IcwnT/s400/bttp-8.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx8QPSuACx9qBCpJqlhFFrq3pFOtCBraxzA27noc-OmFQ_u4xFZUF6V_nCzkJum9LOwHoHLiREngY86hJPtiHqDGRj11hHK_kuID09R2yplEyxk_8tQjIuZwy42QZlN48iOWejg5OZt9FU/

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWd8dzLFRNuyzSZg5K4-M2umngxtWg4IYONq-LUSS8aaUr9G-fiLAPDle-uhB46IIm93wXquc1ujoBMPjEtNO0CioZEtZXB9GDDr41_sfKDDWRMRXslr5pmp30M2xtdfhyphenhyphenT7_JrLKLqrgk/s400/bttp-11.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZdzUXkBIb1Je2m5ZiUbe3X_3zhfJKZeG158QwpXJO0J9Tj2kKMaY844Sf6GPbAdUSxSB6BNvXPXijBp1oqMYb9uNOpHq-h7t3l_q_7zNF_Dh_4CP0Gr4un5yx8cuSyCt0hBq54md8tWVO/s400/bttp-12.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpMMTDtzXnTveN8TzdiLISmp2qMmhS5s0ITTTtKjLwLilek9MDunLFmhm4kwUH9NpJZ2NDNZSOt0JqDXW_GAkln0pN_fEa3n3GahAdbib6pQd-dRWrmf6yYQRqR_68XiImeq9mBw71mbWB/s400/bttp-13.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwqzfLlsOQBv-XKZgC5xRwZ82wWT509CxJfg2sXwiJ52Lxmmb6N4bsy_n9wve-AjflttzhZECJK5GjnJXNyeeamF5D-yDk3pulurREtVQ33vkAT9OsWIB9Zcrl7G-CFaEXdGV6G5MGpJlg/s400/bttp-14.png

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_FlXQwI-Lcw2fpslmIqW595ulu6Sh4yabZFsUHYPAMvzjHcgbKQDlqKzOojkp-MaCez6DfU8OfzQjiz2J9CpXi-yKegwIrC-cso6aLKtepAgODRfpKtfShObc-iJKEfuekTw3jL-c2_rc/s1600/bttp-16.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9ZypU4IcdWYRxcJkEXeD3uEJgmMPxaQNPEQdqVYx1EsuUVh2VD62adaQRCUCseHmprSlcPvsElQbEjJ5ad7ch6lPKvwILVG7YmGbzC3O1trAW22jVjYZgnoSqHxaw7YB-BaRieYHy3vZ7/s400/bttp-17.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_5w-zmlovdc8pKZPCWERPgFqnN3SVpkenEleRAdIFHc4zBZVmR4AN-_M1I2gOoZqARcoBffUagSNRhC0e91P92eSmcCOnO8X-6wZfBdCb97FFht_cgKtbvqgnI6OEvCNbOjgzfSeJ0e45/s400/bttp-19.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW1PhFyw4emEU8HhXAVWfiT6cnDxk9Cig3S8hGKwSSNA_HRNQZFUWCtnIJTiRCQkFDsZlPkcoFgB96B76V8C3KYZYvtVBlbXeSK-_658uOt1WniUayAf0vxhsf_DdGfRu2pbs2_M4Rqce5/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/AVvXsEhW1PhFyw4emEU8HhXAVWfiT6cnDxk9Cig3S8hGKwSSNA_HRNQZFUWCtnIJTiRCQkFDsZlPkcoFgB96B76V8C3KYZYvtVBlbXeSK-_658uOt1WniUayAf0vxhsf_DdGfRu2pbs2_M4Rqce5/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