I use Blogger for my blog and really wanted a "Back to Top" button for my viewers. I know how to edit my blog using the HTML codes but I don't know how to create new codes! I looked around and found a super easy tutorial with beautiful results!
 |
| See that beautiful "Back to Top" tab on the right? When you click it, it automatically takes you back to the top of my blog pages! |
1. Log on to your Blogger blog, go to Template > Edit HTML > search for the
<head> just below/after the <head> tag place this bit of code:<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
* you may already have a jquery script in your blog’s template, possibly for something to do with Pinterest – take a look at the first few lines of code to determine if you already have it – if you do there is no need to add it again… skip ahead to #2.
Save template.
2. Now go to Layout > click Add a Gadget > select an HTML/Javascript > copy and paste the code below into the content section:
<!--Smooth Back to Top Button Start-->
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
font-size: 12px;
padding: 1em;
display: none;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="http://4.bp.blogspot.com/-ihc-8JR84oI/U_oXILTik7I/AAAAAAAACdQ/CM7w68Bdm1E/s1600/backtotop.png" alt="Back to Top" / ></a>
<!--Smooth Back to Top Button End-->
You can either use Cassie Loves' default “back to top” button, which is the URL highlighted in red, or you can replace it with your own.
No comments:
Post a Comment
Thank you for taking a look at my blog and leaving a message!