How to add Image Back To Top button codes ~ Log-Tutorial

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC5zRZwo0uH9rJq_-9dHz3GmIo5iEDQ3nwVbbdtyVit5vgb2daJoP_nwLKb_D-4hOVWXhXA36NjUDlz6j6guPrQLOzoyy_SWVVaWW4EIGBiAwHdfevmRftlT7ueNc-ovsP1EHtSh6AlpHU/s1600/bttp-4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidvOleH3eNwmLF0Zd9dg-Re3vJBL0PGddDvhKwsmt5fSXPrRYb9SdL37wvlhVHMFxy3my99z0RzXYynbR-nNY0QUZpkLSJ5pH7pk_4EmwdFDQaeSeyTqMSINrjonBcXwshn4EoTT5YPdQR/s1600/bttp-3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggYoq-HITu1n_ZY5nMV-JcPQyDeVkYfRZjQkDhgB_iwPPOiAo_856AddiBxAVF8crmEbRsTl88JKavPk-lF0wTadn_uWxDcDv62ikHQps6yOVDXffg4DvRQoQYiSmqZC_TGLIdlD7XXTbu/s1600/bttp-1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOIorz42tKJyF5NAzYAuCt1I4MeLi0u9I0MPgdGF6QXjRPUel0d8Lb_zIMCNZW2KQK7a7sYQEaip6J4bVnTwxxqKMKsoSiODQnMZj0a8DAOtC2p5fTpoQnZrN8NPTikUE7LL5S9knpRfRs/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/AVvXsEiMoat8Gn-vjbbyLTpkTcadGG2eauPl1Dofl_5_qb5fLMNfcJiCy9YVZ2v2_iWLRaA1bHxk1CS3jyzHHHUaMCU29Ua6jvnYekFQbjM7BaFi6_LdBwSkZjc8B8eJdD8A6FpPSWkCGGfE-Fp0/s400/bttp-10.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNC3YvrTikvswreU1tgp-Gy9jwVvcYdkSTBRIQCuoHzIcrAVqBJS-dMRFl1qV98txehD2ZUYOYyCVlOPNfldfklibJaYQ2TNvvoixubmwCIpVEvfxPnpnDmcj2sWfoyKrR7jo6oSwULo-k/s400/bttp-9.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg91vI8LqAdj3vMGbiSmzc0YHmsLWtDWBbzJETSrmejZAW5eWj1XcqoM0Ap2U9MCNZRDIMoEr1nBlsw1ubUbVV_nPxBU-BBx-sGUfrgekIx2j7pLvNDDH7ixrnG4YcMqg6_wUIKyARwNrAi/s400/bttp-8.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ttVBDea6BV1RpF5iQPlfUt-dqZtmFtT5Gfr7SItSrrrH8jHN9rfQYSXUmbw9DudoQBUou3Zth8U5TbXsfXL61U4KlJ80Trfy84Gunjr2ZMQsjZv3SGBPQQm5CjIk6Y7Xdr61czN75NJu/

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibCPzVsQJ-wsV3kZpgFWUp1TEx9rMCMcsTthFZqkRlqSNzG-E3dpN26Xbhu1tiPj0trk8soWHyR090H06fp5x4fkRjgt9wuzwjqZgaakDbTFB3YFeLrZCwZf-eQaPB9eGrHBWAo8g6guXn/s400/bttp-12.png

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA3uh4_MoGBFSTW86aplC1OiHB91BGrHxCuKwN_5Z7P-tnf8RCraQLhfdKWCUXj8kUNBJ65DtV1t1-h-tGAGW19zHsxN_IKj83A4bBGPSp6KqzGKx4-aivcxzkE6veBXmOCowlxeM0uMim/s400/bttp-14.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9Q4OqHPDmK-ln9Mi7Tqyr7N3FyLHOqR1uQki1fYVsh0yEFqR65-bwj1UQUC2yUpXcnBEzv7imSZyNobHofSlW35X_MN-NHWjFsysKz9KDLVXqjDsU9_VHZgyE0BGs-430Ku9jGmJ4por3/s400/bttp-15.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHfLXsqybm8HRhTwuNBrh_yvjQx62-QaFXIILgezsvB968egOA2iKpOSiDOIKPoabk4gEsNDAt2ohOQzFzXMGsgJvUOlywhN0LUdqqZb7yjINbS-b4j8Xvktz9egXcADDRZ9xqxdICx2pZ/s1600/bttp-16.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbRzNZtHiXtJy_RoC1GHaswjr-fsL_U1x0GaRo1FsAzkU755NPoSBQL4lDnSVjDIjlCyOH33N42zBYu_IFtO_2KXyXC0fi3MsniZE8t34jELVYnRWxdw9NRSeLxF_w-5sej8etHNaADTxX/s400/bttp-17.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil8X3_-jX9t1Tv5Yjs9hzrUqgJG_wYvQXAU-ZsSs1D9Rwgspr4dPnxE-bDmkoenUYdtm926bNgfM7pGOODeoZRRWXdc0itD9SCtXMiEMT63dLzjBEvpF8fLLU8a-GrrG-z8GyUHNcg3F99/s400/bttp-19.png

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

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

Now click Save Template

About Admin MC3

Relax and enjoy, don't be rush.

Log-Tutorial

How to add Image Back To Top button codes

About Admin MC3

Related Post