How to add "back to top" button in your template
1. Log in to your dashboard--> layout- -> Edit HTML
2. Click on "Expand Widget Templates"
3. Search "Ctrl+F" and find ]]></b:skin>
#backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}
4. Search for </body> and before it paste the next code:
<a href="#" id="backtotop"><img src="http://img171.imageshack.us/img171/1494/topbm.png" alt="back to top" /></a>
change the "http://img171.imageshack.us/img171/1494/topbm.png" with the link to your own image.
5. Now find </head> and before it paste the following code:
<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>
Save the template and see the result. You can see how it works on the right side of my site.
4 comments
Thanks. Very good tutorial.
Just want to say I think you have a great start to this website. I have artisteer but do not know very much about altering xml files. I am hoping to use your tips on my site.
Thanks
Thank you for the visiting my site and hope that my tutorials tips and tricks will help you customizing your site.
please share how to make popular in the post like the look of your blog ... thanks
Click to Add a New Comment
Leave your comment
- If you're asking a question click the Subscribe By Email link, below the comment form, to be notified of replies.
- Do NOT add links to the body of your comment as they will not be published.
- Only the comments posted in ENGLISH will be approved.
- If you have a problem check first the comments , maybe you will find the solution there.