4 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/AVvXsEhRJ6_qh2Kyib_x3JmEV_7_VOWDz6iN1LeHO3-XmmwJKuq8C9mjvXw8JrPQSzhu4pt3jjUhB8opn-vWn_fq0E1RVDSY48hmLmZZC4SCJRdpUkW6bDiTIv7nA0iNaqFI-mVa9v4BpZrXyLmj/s1600/bttp-5.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzX4seBh3epmAVPyJGbzlCzw3Mf_97k87uMiViw5JXCDFbXPufSgYZpnkxL7PJFEI2iF1396gZI6Jgp6YOU4SoaYUKVcAjJLxzHIl8jM5O-5RnrWcCLVBTQPjERSXHD6jvC_qoeSoZq6z8/s1600/bttp-4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH92UNANQ7IqV37oGdP4HsBa55TwFHeASPF5-lo4xfRiSlHroWOCsZKrS81jhY0xuRsWmX2X833C02Tp5ZZ2vwgIZAZaKU1sH6WRxhUHq966xSYO-l1YCrU08GULyR0ObuhdHmNV18lWF5/s1600/bttp-3.png

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg38KyTLEl3yLdzOLkjjAktPNw-HhFDLAmY4AT5cNTwW6DRVWU2b5AqahRt2JCDb2BpzV6HtHR-fbxnEQQu5LvaGFalXL8V5W21D_MtzS52qaAirHo6owtdXuhQyF2w4YqdjNv6hft8JXim/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/AVvXsEghmylub-wYR5T9iAsDjBq_lxjH8WhR2PdUNNN9TzvWQmUVhXcYLeNfHBLyzuDPIEd7CtpXdDItMYY783LkCNC1CoFuTeRCSyBfbVUlxzjzCgoXBXebqyDxNHiMFnylvncNvIHjQWoVa5w4/s400/bttp-10.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfr-VRzG10moGPaRKkBCy0wLy_lOFhuWvay3nvCx3hhlCZg07ae30UqsVb-OOMm8rSSDpmOhfBrhNqi3Z28oa0TxS0DswmzH9CmwxaSuFatBwnzsdgt5wpsJjvw4sEzjeaqXjUiFglHoEp/s400/bttp-9.png

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj09vTRhMugoMNGgOvhjOWIFeNeXmBvptvZMq66fLrjoKSEBpkkbrZEdadjLJRnrpTuUfc9IWTRoXYi4_8k5xfQg8B0315rR9EEQgIOgiEe6oRAAi3C5ECn21yHHp-AiCH_ePixkb5Y3weB/

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcL5xJEMgAg_-Pba_N7ivSjZsvTkgVVbHYg3haT2CPs-QgmLHbTcauHWMwl7zctt_n_05Eeue-u58vSPeE0vOryv88SB8VzUATej3SOVYPeKrxo7uf0PZrkwccjynXsaJE42aK6lT6gifz/s400/bttp-11.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0vcF2eGSTQHyiNH9L6jS0ZdEh9ICtQCAqgAFXCt8N_Xso-jNR8ZA4fiHP0eeEvskYVt6y70EkVm6Q1pIFoTUkAOG_u2SHzPCxSk2gxBstl1ik37fj21ftOW_pOnxCeHK6zjlw0D1GwGgJ/s400/bttp-12.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXHt0yIh3-qQf59lYwjdCXe6g6lpV8TtrZSeHil8Y8BylWQ58nMqPnJTZihLQgznkjcYJlBhg_zY0xWrXVZU-XOzPSITzwzG9tee5HRg74dxH6zLMDi8m-3hG07SDx5BDvazoUZjA3a6-_/s400/bttp-13.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSJQqXc4jdRCLr9r9juE3mcsvPWrBTqMx8_cmL9DzJIk06xbq6ITd_CKwmn8eeU50ROVB-QrtQlswoGvi8m6tfo115-XjU31cyTWE-cp9Zxgwj61zyCUfFPHj1GqRzHtx1CAlce6MTXtxI/s400/bttp-14.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoRckRVCO-05AZzSrRtnRX3UR-r8lubLfr12kBd5FnG8OFIzwqNNnzPndfUD8WNrj7fJcMSAo-yhNwbkwGN1rmzAcRskkb2tn_7ATh7EZenuQWV4lU-QlcC3rAMyWopB0-OuiVN5TOq_j3/s400/bttp-15.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh3L3eosfSq4gUp1HYCPXO36gkuqBYRSuKWLIlUI8Vf404O9PXACbU2IPwY-iV12ggf4wBOO-M2DIrnImO87pkLjzIIGA_RNSfpaLEDazDOHb2iIjkRoZ9Bo1rjhszojUWy4pvnyu2A7St/s1600/bttp-16.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbPufN2IYePRfuwgKWQ3FhvcOe25dwr7DYENFOqTm8Xat_FIdVMxr_ZvgSQr0iEwxWq19qoYP5dwXESNJjfYHpM__MXVdxmfTUlRgSqZOd-5rv4fU8c0Hnh8xrDlmC0615XHiHeqz9pEax/s400/bttp-17.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVmBupwvMQyrC0L62WXoTSTUcgOF_yEpv2Y7tlSrw0j5b0FumqaMjvSqf6Q2cbBb2LLgrhmY3IXoBrJyoVx5UeeSB9BrQVmU8jO9gNdO-2o113J5oMYBafCoE7nLvzLnPWdyTiSSnzms4J/s400/bttp-19.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQI8ESHTQMqFq5h71fp3vjkS-pUXtuYIBF5lYJWMdilEidqCFmm-w5Ean7RXzAlz-xwf9oFSMk4L_TnMk5Ss7H5MHeSdl6UplhBOgj5Q9hpML1tiLRghxfHv5_yLFlmz-A_rDrWmcUr2iK/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/AVvXsEjQI8ESHTQMqFq5h71fp3vjkS-pUXtuYIBF5lYJWMdilEidqCFmm-w5Ean7RXzAlz-xwf9oFSMk4L_TnMk5Ss7H5MHeSdl6UplhBOgj5Q9hpML1tiLRghxfHv5_yLFlmz-A_rDrWmcUr2iK/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