Friday, February 26, 2016

Beautify Your Blog- Back to Top Button Tutorial

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=''></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-->
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
} else {
jQuery('.back-to-top').click(function(event) {
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
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;
<a href="#" class="back-to-top"><img src="" 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.

LSP Signature

No comments:

Post a Comment

Thank you for taking a look at my blog and leaving a message!