Monday, May 9, 2011
How to Add jQuery Scroll To Top Button in Blogger/Blogspot Blogs
Do you like this story?
Steps to add jQuery Scroll To Top Button to Blogger:
1. Login to Blogger.
2. Navigate to Design > Edit HTML.
3. Backup your Blogger template by clicking Download Full Template and keep it safe in your computer. Remember, its better to do this everytime you do a template edit to be on the safe side in case you encounter any problem
4. Find this code within the blogger template code(using CTRL+F):
</head>
5. Paste the following code just before the above line.
6. Find this code within the blogger template code(using CTRL+F):
7. Replace the above tag with the below one.
8. Find this code within the blogger template code(using CTRL+F):
9. Paste the following code just before the above line.
You can use any other image in place of the above one(in bold).
10. Click on Save Template. You're done.
1. Login to Blogger.
2. Navigate to Design > Edit HTML.
3. Backup your Blogger template by clicking Download Full Template and keep it safe in your computer. Remember, its better to do this everytime you do a template edit to be on the safe side in case you encounter any problem
4. Find this code within the blogger template code(using CTRL+F):
</head>
5. Paste the following code just before the above line.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){
$('a[href*=#top]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
//]]>
</script>
6. Find this code within the blogger template code(using CTRL+F):
<body>
7. Replace the above tag with the below one.
<body id='top'>
8. Find this code within the blogger template code(using CTRL+F):
</body>
9. Paste the following code just before the above line.
div id='goingtop'>
<a href='#top' title='Go Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFKHjpXY2tXBsHCEr5JUv7epmTm4ZKNvkCgoOxCreUGd1_Oz6r25E1yQ3ykdPtApK61h1hGNWGeQxU72HU2ZYwurivFGjPqkYCITA23eY9e1DLJTV9ot_OTUkuhTgG1H8PgW94cThtaSSr/' style='right:20px; bottom:20px; position: fixed;'/></a></div>
You can use any other image in place of the above one(in bold).
10. Click on Save Template. You're done.
This post was written by: Nilayan Ghosh
Hey friends, this is Nilayan, the author of this blog. I'm a hardcore net addict, build websites, love blogging, and here you've the result. I hope you're enjoying going through my blog. Good luck! Keep smiling!
Follow me on Twitter
Subscribe to:
Post Comments (Atom)
0 Responses to “How to Add jQuery Scroll To Top Button in Blogger/Blogspot Blogs”
Post a Comment