Venus Trapped in Mars

23 January 2016

How to Add A Back to Top Button to Your Blogger Blog || Saturday Sessions

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


 photo signature_11.png

10 comments :

  1. Just added this to my page! Such an easy addition! Thanks for the tip!

    Emma | Seeking the South

    ReplyDelete
  2. THANK you! Just added it to my blog and am so happy to have found your blog! :)

    ReplyDelete
  3. Ahh! Saturday Sessions are back! I've learned so much from these! Thanks for another one! :)

    ReplyDelete
  4. awesome awesome post. you know I LOVE these!!!

    ReplyDelete
  5. OK 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?

    ReplyDelete
  6. Thought 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/

    ReplyDelete

Comments make my heart go boom boom.

I respond to all comments, if you are leaving me comments and not getting a reply, you may be a no-reply blogger. Fix it HERE!