If you have lot of contents in your blog pages, and if you want to make your blog to be easy to navigate for your readers, a back to top button will make it easy and perfect....
Step 1: Log on your blogger account and Go to, Dashboard > Template > Edit html.
Step 2: Find the following tag by using "Ctrl + F".
]]></b:skin>
Step 3: Copy and Paste below code before the above tag.
#backtotop {
padding:5px;
position:fixed;
bottom: 5px;
right: 5px;
cursor:pointer;
}
Step 4: Find the </body> tag by using "Ctrl + F" and copy and paste below code before the </body> tag.
<a href="#" id="backtotop"><img src="Image Url" alt="back to top" /></a>
Step 5: Now select your free back to top button in the below list and copy and paste it’s Image URL in to the place of "Image Url" of above code.
1. Image Url : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgd9SBqUcL5aZc2asOck9bGTQUljlDnAThyphenhyphen5nuBvnEdK27kjZWD5V0K14SQovGVBazmqsQJlO1aLCLYNAKTHafDphcIUmkhhRETAqV3dao-DHP4kVv8MlTL6gdyqs_1rUc4B-anA4Jm5K6/s1600/new+back+to+top+button.png
2. Image Url : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUGGqzjbdtW9ZNaMhKHeomD4OPbIu-4aY83RqIyceGCiEyVvgSCRmq3TzVpaw8o89sKnLibU8vjm9wN1q14CFM_55ifuLfqosMpPeCh5yWelJa9gzCa_41UIAnh7PeYP-gV-jBmfhTD06g/s1600/back+to+top+button.png
3. Image Url : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBj6mb4yAXdzo9_iqYWxTQmdHnL9XEr9AkukO4w5DmA691Qyy6fl9pNrBgE0TZfTOB2kgV1p0qat1MfKSqjz9J8r81Qyxl3FBys4jAdxHLn0fcFzDofcKO5N-7C3JSLO55iKoSDJhnXMGw/s1600/Back_to_top_image.png
4. Image Url : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixFVpHm2sY0E9rB-eCKT99dJ9fLY77t_FtSzLYaov0zT_ayToftbSxg2PoCwSc1slO6RJHao_amGGdmyzwZsLz0nuRC_HDTU1Pq2t2grr5Y96GJTDcp9KP4MoJwuw6rC0_udu7IgAGs7Hj/s1600/back_to_top.png
5. Image Url : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii4hq1S7UVfZ1TCmqEczG9N7-vEF7Bliol20fHHPVz_iUN3TTzibiV_iMXhtfC3i5bDs-oyHITH29q361cLZ6zN-P-FG-9CJ7XIHucnMlkgGNmK8rXqoSqsOeNRDtrOZFWxDYTM4sIF-aG/s1600/back+to+top+icon.png
6. Image Url : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_JijpcKQdoUgfB2HYoLLLgdLWbkKU8w7Dm6tcgFfV88UeJpcr2SZ0yMGZHH8eNfaZdj20B_l7G5zcu2zrAwq4PdiQ-GNcYBafIM7oK9VxWO_HFqa1hzhNiU8bye4_7PfYN8To7moat3fC/s1600/back_to_top_button.png
7. Image Url : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXoMB4VH-h9x9HQQnVuNUeT36LGs1A39GIAKSgpLlF5Ijw_EB1oCvp_tqfvCbqAdIJkFWz7i9QdbWQbHGfv7R0Lti_R0MokwCcmRypqgyJh-uWUHKk8PQOBXfIwd4tARv7M4rQo97Xiyaf/s1600/back+to+top.png
8. Image Url : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioOyBLD_XntPDNryYCA_z3WFKl4zjtKCP_aUtHoXk5jOn46Ufg1MNMS1KnLC6af4toOfyo9ctmChC28hoO2tvLF6yBinnLHxN8Ae4jsfzh3XYKH3t7fur9xv5MCpN6NMQ00dEf7Pek2cqJ/s1600/back+to+top.png
Step 6: Find the <head> tag by using "Ctrl + F" and copy and paste below code after the <head> tag and save template..
<!-- start back to top -->
<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>
<!-- end back to top -->
Step 1: Log on your blogger account and Go to, Dashboard > Template > Edit html.
Step 2: Find the following tag by using "Ctrl + F".
]]></b:skin>
Step 3: Copy and Paste below code before the above tag.
#backtotop {
padding:5px;
position:fixed;
bottom: 5px;
right: 5px;
cursor:pointer;
}
Step 4: Find the </body> tag by using "Ctrl + F" and copy and paste below code before the </body> tag.
<a href="#" id="backtotop"><img src="Image Url" alt="back to top" /></a>
Step 5: Now select your free back to top button in the below list and copy and paste it’s Image URL in to the place of "Image Url" of above code.
1. Image Url : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgd9SBqUcL5aZc2asOck9bGTQUljlDnAThyphenhyphen5nuBvnEdK27kjZWD5V0K14SQovGVBazmqsQJlO1aLCLYNAKTHafDphcIUmkhhRETAqV3dao-DHP4kVv8MlTL6gdyqs_1rUc4B-anA4Jm5K6/s1600/new+back+to+top+button.png
2. Image Url : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUGGqzjbdtW9ZNaMhKHeomD4OPbIu-4aY83RqIyceGCiEyVvgSCRmq3TzVpaw8o89sKnLibU8vjm9wN1q14CFM_55ifuLfqosMpPeCh5yWelJa9gzCa_41UIAnh7PeYP-gV-jBmfhTD06g/s1600/back+to+top+button.png
3. Image Url : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBj6mb4yAXdzo9_iqYWxTQmdHnL9XEr9AkukO4w5DmA691Qyy6fl9pNrBgE0TZfTOB2kgV1p0qat1MfKSqjz9J8r81Qyxl3FBys4jAdxHLn0fcFzDofcKO5N-7C3JSLO55iKoSDJhnXMGw/s1600/Back_to_top_image.png
4. Image Url : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixFVpHm2sY0E9rB-eCKT99dJ9fLY77t_FtSzLYaov0zT_ayToftbSxg2PoCwSc1slO6RJHao_amGGdmyzwZsLz0nuRC_HDTU1Pq2t2grr5Y96GJTDcp9KP4MoJwuw6rC0_udu7IgAGs7Hj/s1600/back_to_top.png
5. Image Url : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii4hq1S7UVfZ1TCmqEczG9N7-vEF7Bliol20fHHPVz_iUN3TTzibiV_iMXhtfC3i5bDs-oyHITH29q361cLZ6zN-P-FG-9CJ7XIHucnMlkgGNmK8rXqoSqsOeNRDtrOZFWxDYTM4sIF-aG/s1600/back+to+top+icon.png
6. Image Url : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_JijpcKQdoUgfB2HYoLLLgdLWbkKU8w7Dm6tcgFfV88UeJpcr2SZ0yMGZHH8eNfaZdj20B_l7G5zcu2zrAwq4PdiQ-GNcYBafIM7oK9VxWO_HFqa1hzhNiU8bye4_7PfYN8To7moat3fC/s1600/back_to_top_button.png
7. Image Url : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXoMB4VH-h9x9HQQnVuNUeT36LGs1A39GIAKSgpLlF5Ijw_EB1oCvp_tqfvCbqAdIJkFWz7i9QdbWQbHGfv7R0Lti_R0MokwCcmRypqgyJh-uWUHKk8PQOBXfIwd4tARv7M4rQo97Xiyaf/s1600/back+to+top.png
8. Image Url : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioOyBLD_XntPDNryYCA_z3WFKl4zjtKCP_aUtHoXk5jOn46Ufg1MNMS1KnLC6af4toOfyo9ctmChC28hoO2tvLF6yBinnLHxN8Ae4jsfzh3XYKH3t7fur9xv5MCpN6NMQ00dEf7Pek2cqJ/s1600/back+to+top.png
Step 6: Find the <head> tag by using "Ctrl + F" and copy and paste below code after the <head> tag and save template..
<!-- start back to top -->
<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>
<!-- end back to top -->
No comments:
Post a Comment