Recents in Beach

How to Install a Scroll To Top button on Blogger

How to install a Scroll To Top button on Blogger

Some custom blogger templates come without a Back to Top button installed on the already-made design. So here, I will show you how to install a scroll to top button on blogger.

Let's get to duty on how to install a scroll to top button on blogger blog.

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>

Note: In case you 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 step 2.

Save the template.

2. Now go to Layout > click Add a Gadget > select an HTML/Javascript > copy and paste the code below into the content section:


<!--Allbloggingmag 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>
<!--Allbloggingmag Back to Top Button End-->


You can either use my default “back to top” button, which is the URL highlighted in red, or you can replace it with your own.

Finally, Click The Save button.

Happy blogging!



Have any questions? Feel free to ask me via the comments section! Remember to share this tutorial with others on Facebook, Twitter & Google Plus.

Post a comment

7 Comments

  1. This comment has been removed by the author.

    ReplyDelete
  2. yes we can use jquery for that. you may also like.. latest tips

    ReplyDelete
  3. As claimed by Stanford Medical, It is in fact the SINGLE reason this country's women get to live 10 years longer and weigh an average of 42 lbs lighter than us.

    (By the way, it has NOTHING to do with genetics or some secret exercise and really, EVERYTHING to do with "how" they eat.)

    P.S, What I said is "HOW", and not "what"...

    CLICK on this link to uncover if this easy questionnaire can help you find out your true weight loss possibilities

    ReplyDelete