Whoa. Look what this is.... can it really be? A new Saturday Sessions post!!!! OH. EMM. GEEEEE. I won't bore you all with small talk, let's get right to it. The topic today is how to add a "back to top" button to your blogger blog.
Sarah requested a tutorial on this about a million years ago, so I hope this is better late than never! This is super quick, looks fantastic and makes life easier on your reader. I first installed a back to top button on
Helene's blog, and I'll show you how I did that today!
Help a sistah out and either pin this post, or "like" it via bloglovin!
In your blogger dashboard, click the "template" tab, then click "edit html"
Find the <head> tag, it will be located close to the top of the page. You can also search for it, by clicking inside the box and hitting
control + F.
Place the following code beneath the <head> tag :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Click "Save Template"
Go to the "layout" tab, then click "add a gadget". It doesn't matter where you place your gadget, it will automatically display in the bottom right of your screen when you scroll down. I recommend adding it to the bottom of your sidebar or to your footer so it is out of the way.
Choose html/Java Script
Paste the following code:
**Below, where it says Your_Image_URL_Here in red, be sure to replace that with the link to your image.
<style>
.jump-up {
position: fixed;
bottom: 2em;
right: 10px;
text-decoration: none;
padding: 1em;
display: none;
cursor:pointer;
}
</style>
<img class="jump-up" src="YOUR_IMAGE_URL_HERE" />
<script type="text/javascript">
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.jump-up').fadeIn(duration);
} else {
jQuery('.jump-up').fadeOut(duration);
}
});
jQuery('.jump-up').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
This is what yours should now look like...
And that's it! You're all done. If you have any questions at all, please leave me a comment and let me know. I do my best to respond to all questions, but make sure you aren't a no-reply blogger so I can easily get back to you!
To request a Saturday Sessions tutorial, click here.
For more blogging tutorials, click here.
Just added this to my page! Such an easy addition! Thanks for the tip!
ReplyDeleteEmma | Seeking the South
THANK you! Just added it to my blog and am so happy to have found your blog! :)
ReplyDeleteSo helpful, thanks :)!
ReplyDeleteAhh! Saturday Sessions are back! I've learned so much from these! Thanks for another one! :)
ReplyDeleteThanks so much...just added! Love this!
ReplyDeleteAwesome! Thank you!
ReplyDeleteawesome awesome post. you know I LOVE these!!!
ReplyDeleteOK I have a dumb question. I swear I used to know how to do this. But when you say a link to our image...where do you host your pic to get a link? photobucket or something?
ReplyDeleteThought Elevators Review Electricity is very important at home as well as in businesses. Most things today rely on its supply and it has brought so much convenience in the way things are done. But even with all the benefits that electricity provides, it can be very dangerous and you therefore need to use it with care around your home. Looking into a few things can improve your home safety around electricity. http://coopersdivertimento.com/thought-elevators-system-review/
ReplyDeleteso helpful thank you so much!
ReplyDelete