Back to Top buttons can be great addition to your blog, especially if you have a lot of blog posts on each page, and also can be a cute little extra to show some more character.
Firstly, you should go into Blogger and go to the Template page. Click 'Edit HTML'-this should take you to the HTML of your blog. find the code <head> . It's in the first few lines of code, so you shouldn't have much trouble finding it. Directly underneath, paste this code:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>Save your changes and go to the layout page. Add a new 'HTML/ Javascript' widget. in that, paste the following code:
<!--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="DIRECT IMG URL" alt="Back to Top" / ></a>
<!--Smooth Back to Top Button End-->Now create your button using Canva or PicMonkey, and upload it to a photo-storing site like PhotoBucket. Grab the photo link and replace "DIRECT IMG URL" with it. Save and check out your button on your blog!
If for whatever reason you're having a problem with this, feel free to contact me or comment questions below!
Sophie x
No comments:
Post a Comment