How to add Scroll to Top button in blogger

  • Log on your blogger account and Go to, Dashboard >> Layout >> Edit html.
  • Now find the following tag by using "Ctrl + F".
]]></b:skin>
  • Copy and Paste below code before the above tag.
#backtotop {
padding:5px; 
position:fixed; 
bottom: 5px; 
right: 5px; 
cursor:pointer;
}
  • Now 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>

  • 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. After Replacing the Image URL, it should looks like this: 
<a href="#" id="backtotop"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpOZIVQrgbMS4DsHSj-7iccPrxcj8gJPx_zCqHWRkF4HFijTL5VvckVLWmHVoy8wQ1L6_s9ewd-h0IigZdP0Z2hFkt9OE70CR3W2rOVnIOG9j_BsQi1Fic02N4sUTf9FhRSohKleGBdJuy/s1600/back+to+top.png" alt="back to top" /></a>
  • Find the <head> tag by using "Ctrl + F" and copy and paste below code after the <head> tag.
<!-- start back to top -->
&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;
<!-- end back to top -->
  • Finally “Save Template".


No comments:

Post a Comment

Gallery

About

Your one stop solution for various queries about anything and everything you can think of. Drop an email to me asking your question about anything. Email me at: tech3lper@gmail.com
Register your domain name before anyoneelse does
Advertise here
 Advertise here

Blog Archive

Designed By SBT