How to add Image Back To Top button codes

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT4y_YLn2sAJQv-DDE_OudPmO1BnyJF2CSIWuMYaWMPjYKtVWzTupH3wyx1xqIyvKjLoXpPM8eNefcp3HVOkoHFRBWbxgWq8py6eZAm6YNiSkXHIfne-awsIDuAAcsUPxecXL2uJrvEfto/s1600/bttp-4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnBBygfCVlkY5a999CtsOtwW1LEnQJ1s7WhIud8jAtTQSfAlzEhtM1SOHzb8ceKT2XSluu1FC8tlk2wyvMAxNZZJDgel5qkCQovF31uh-foMoTLOg2s6ZZeBENVACkU6MOHaTCZGE17C-a/s1600/bttp-3.png

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioX-ad1-laVi_BU4O_rWWibn-rrZo_yLziuY0sMxJvATZr6MEPZiCht1bKYnB7XHPMMf3dP2_vWWmGWoQdOOuJhI4DvJyHTpJthL4DHiXZeZDG8EgAoPbcXWi5me2nR-_rcd313DqPEjsZ/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/AVvXsEiQ9mv3RBcrG2Dirg5JI5FICWyyu8LTlNaM8z6VswPcpos3pky5a7ZYLxQZ6zg8ZRsfo-DC9jahJiVE82KZJ77u4XPz-YFIhWgoHMBs7Xd2CIebIW2tYLLYzyqzpKseJLcgEg1j4BMSIYIB/s400/bttp-10.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7nXooHio3Zk5BotrPg3NO3-ladD6DFhGW5SnaxX0fX-LsUGkqIMtvBUJhgcfsyo_6GfbTBFSaAdbIN0lnFrhUcjBjynYtEtpgip3l7YLpZtZLmKjoqzC_4WePWwIdEJjF0R8rHWtZqo4k/s400/bttp-9.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW3AOB1POkoTXdlzurUcD9I1K4-PZDyWc8YTF8k331hGiyPfTs-2sEgs6kOcOVvlO1VMZWi2Sdo7ZvPyTDwLEFCUe31rxtn0wnHCIVhj2AgZp6DkkE0KYTpBlU9ZhCVD3MdEjS9XldQvoF/s400/bttp-8.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikTU2_7D37RP5MSrjxryGgxKaLpdtuUy18Y07DAO5XTaBbrfPcHB_Hwj6pD3m8F8n8OnMOohR7dFRBcGqg5tNKdd1-aPn89jV0dAGetyA04iWB5KGCVn0vBpibc21GaqnTrBbXVP_SZZW2/

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlMlE9dbRjMltNnN113tvtDUPV2EypkWGScOMIq0YzXCU664hP92TVfkHI6SrXyeZAd0EQSgZpoDPPSzwLMCk_R9mr7I1T9o2h6FnSxvAAL1seP1PkkHDHTHA6rl1PAu8yGABrrnKd1ebB/s400/bttp-11.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1fIm-0wd6x4-SIzc3e315Yga4QlF8rgRLJOnhDg4A68RN4hIl8KoB9m8oe05HKiRCsvA3QS3FfOm4Q-tGFnDbpCQ_YwT9R7Up7MezZ0rGRTq946kQBXS_Dx34yFwdaToghfitDKv5AZLf/s400/bttp-12.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpHyxHB7RVLB6jXz_7yf5Dn8NFPrZCYWgp3MDbEIGgnTxLCqbY8xm-Oe_2BZjfmays-9zNrqOU4tBJ93sZQ6UEaddnL87VN7u_rPqs5Lfw8LteooPvS0tNn_fyckHCpK5AWWU0cHDqOh6h/s400/bttp-13.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVRJz_Fs0r8VYa9r5IrdtWX0EAoUL9jzkkWSaaGfVwQ8UqkYPiHXAIAFo8FW33U26ZBAI8et7Zp24Wx2xYJ7y0c2uaLOdcp2ByCyiy8sOlmq09Pz5pUIrXLuuYkEraTR3f0NagsOyVJl20/s400/bttp-14.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqEE6s05J5RV0j7o_jaMyqBTyFdcB7bUY-Zt9dBJcNmBEN2RbfqD2-N-OmmDeEN0DPasSVjNjy_sZaIn9Fx7XeESxDK29wz9emWG35dd9kkIoDT7nABE7HwUNevp-cGbS6uaDxlbBCwEP7/s400/bttp-15.png

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6UD3CW4bMGoeCDN36g_Y6c0zFsXVbL_eJIeq0zB5uXpko7PHYvnz4vrf_u9PQuRMqUUNI2EuV3N2S0egg2k7RArEc0wjnG0aUa1sIgWTYACbSszhSS2Cl9tviDH-dM825bqgDyHh4oWWz/s400/bttp-17.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQSTB6saFIkxD2YqxYqh96hX03fNusGNtrEfI_e9W1c645SFq7LZzOxxS7jBOuC6ehP6Ex4Xmcw2RFlH8FwSLBY443JR3AmLcNZ3m-sYLx9rbbty_1sVUPtzt4A7N8VBHQgBcMzGyb5RYg/s400/bttp-19.png

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