Add Back To Top In Blogger Site

Today we’ll learn a very easy and important trick, Specially if you have got a lot of content on you blog pages, And if you want your blog to be easy to use for your visitors, A back to top link or button on your blogspot blog will make it easier and faster to your visitors when it comes to fast exploring and browsing.
Ad
Now we’ll see how to add

• 1. Image Back To Top Buttons With 19 Different Styles
• 2. Text Back To Top Link with different styles And Colors

1. Image Back To Top Buttons With 19 Different Styles

Step 1

Ok, now go to your blogger account and go to, Dashboard >> Layout >> Edit html >> and please find the following 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/AVvXsEii7H6mKiUmugs_iKR19sU9uI37KU1_tOh53vu-Bpn6AJJpua5nfAqn33HLN2r1pfQyLl3i3B1cQjMPUtEaOaSbYwcsa6W3Cj7gvJF-Ko8BPNC5BWn4H6iuG1Ei5OiRBfAMC2xNZB7ryM-h/s1600/bttp-5.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfRYDtW5PdXktc5UGfb1CGum1IrsM07TNPl_s0jah8Z-u52-k2ZNEd_6x7OUcAq4hfQXWovNw8AQErLmZEXgBPnF2EgnvvT-ecXiGyvxy-nivsZJ_Tet4mzLxbhAqogR-gFgb09dFPSNpL/s1600/bttp-4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1i64zBlsk69WjBt9UWc0mGruMqBpjBX9zdDa2DmpLqLKVimaqGjbk4OGoHJTR-ldTbukzLjLGXXSRBcv0TjlHR_GG6FGNWFbUmGJSIPvmWcwu5gXzU6ozqZdHaGrKOplVcqacHqX_l9u-/s1600/bttp-3.png

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgstmsgLMnOwftsxM7AcuN1qyno-E0QuSlWX4mhC-Qhcf3umyC5Y_CI9mcSbZCohr7sEur7WkGDlVwJv-8m8w2lsCVr264hLtOpTlj72W42zjUWASKFK0LBZlmTkSPj3yk_G0b_uFsYEpe-/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/AVvXsEhZYYSWQhlorqqC1BDXUBQMhdrv3rZDUBloyQgtMShNMuR4eqkpw-Fzw8w_FzcoBLtO-4LI19pBENsrB_-yW4Qp72uZ-7CUzanxHCm_WHQAz_RRCzVL79sQK3JLs0AJ07LkWWYusNh1gICW/s400/bttp-10.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdj7hZ8HBlr_dxME5D0ExMuvo9qnaKV2OPdW-Jq60CX4Oa7Hv4czQ2FgPj2M42gr5lJlvPulViXAhF03-zj4uEVEizNl-KJpqNVmFR9vZ9viy8z4_HJIU3dOXAEDgniyAl3ZQqeMAcPdoq/s400/bttp-9.png

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnWJh8yBwyqfztYA1yCprwE3ncl3KHuUsoU_FfutXpHkLfpCCWcYhXShSitAWkLboGCXJ7C8tXXhjwVCJOD82GfijiIFcfD-XXGBOywChyphenhyphenSfrtTFDFx0uLFKYJV3kpQK2941E5Nf5N3nlR/

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDaZiPfeK_omM-eoDne_ZTIosoCvft50qs1rpk-p_i5DWwFxw_DprPl7Bk21s0EB-W6DXvTcgoIn032Llk2_ao4OA9TnledYmsw8ngE7iBNEEZaNnRHkdz7FYXory9-W1AZ5AYe-NK1QRN/s400/bttp-11.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLtpxhmMb_xPIp_f6dKhY9NxhhFL-ytd79doPUqmzVzfjx93zbiK86yGEfYBat88CH_pVJgoumREwngrNqhyphenhyphenGSeq2C8xtmNDzLHmTv9oVWEU7syAL0ykaAFUs2fdLEZEDZGSkYGZi3oiPG/s400/bttp-12.png

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQoB6apQ5K_p1O20N2y8PB-oLWTg4cL_FCpZOjPq1APrXTRmElJx9NAyjiKB7RtNhH700-gTiWqtHkht0GKkFijdnXdH-KChSnakdYnTUMzr_xStwxFd_-k8AlV4d4fLg3uMBwO5qZ7E9P/s400/bttp-14.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1AgYsQqT7H-jDdDCvA7a8ranFGRpZL5lGNOgdRhuZ1cRPHTDZUGM1hOE8A6KN6QHtieI_EjmBUNrq7_Dzx8LuNBRg2MqT0MiYcXyETf_vMcrqo-Hm2m9DHtyq67MSD6OG1eYqrCK5M9M8/s400/bttp-15.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1FkEZyFkDQBfsFZWZ0zrnpOcGDI1ymIQqwfW8u6LB2i1DQeHAHl46Dv1xhxF9uSCEUkfphJXJgQE3etfx5PX2Q8YGK5DsnoJduH2N1gvbsHCTqjwN5fFBdcDS4yAd90v-t-qUcYBejQtd/s1600/bttp-16.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsdImqHv2vtvpg77fcdDBoRdjFUC57BQ8EhAeFF7X5kFo-3t14neeCBMmdZlF7AwbJZ3phczcF26hbu-s8gYEVCbFK_MfLCcF9IoBDh4oQlfzMoQQPY_1loiyWzNrIhBJw-beUWbdhVG5A/s400/bttp-17.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4NX7UIukbGdQv0LiHKKRLh3-s4uSB4fk0ZnBXPAl-TsZLXJOgp6gyDRY0MqjydbZUCEMrgK-wbjxjOXZklCGqVY5GAGTITkzuF5iOYGji_bSGyqynFg2uJeWzy98KVwlkJxHFZBR_4dbS/s400/bttp-19.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4fruNXB8OR11TvrUkra-3HlJ8WbqBxJNLRAuqI11tdLDkYUGIsTZOp0h5dtM9pGkNFFuy56C0JnzNua6vwVM6EKE0nRUVZe6-ZXwrG-gkZyluwW89lMkw0eBMxP9XhRb2GknHnXO0od4z/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/AVvXsEh4fruNXB8OR11TvrUkra-3HlJ8WbqBxJNLRAuqI11tdLDkYUGIsTZOp0h5dtM9pGkNFFuy56C0JnzNua6vwVM6EKE0nRUVZe6-ZXwrG-gkZyluwW89lMkw0eBMxP9XhRb2GknHnXO0od4z/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>

and then click Save Template 

And you are done.

2. Text Back To Top Link with different styles And Colors

 

Step 1

Ok, now go to your blogger account and go to, Dashboard >> Layout >> Edit html >> and please find the following code.

 ]]></b:skin>

And before it add this code

#backtotop {
width:100px; /* Change Box Width*/
background:#F4FFBF;  /* Change background color*/
border:1px solid #ccc;  /* Change Border Style*/
text-align:center;
padding:5px; 
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
color:#666; /* Change text color*/
text-decoration:none; 
}

And please change it’s properties to fit and blend with your blog template,
Change 100 to lower or higher number to increase or decrease the size of the box.
Change 1px To change the border width.
Change #ccc to your favorite color code change the border color.
Change F4FFBF to your favorite background color code.
Change 666; to your favorite Text color code.

Step 2

Find the following Code :

</body>

And before it, Paste the following code.

<a href="#" id="backtotop">Back to top</a>

To change the text on the button, just change Back to top to what ever you want,

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>

and then click Save Template

And you are done.