How to Create a "Back-to-Top" Button

Hey guys! So I know this is a long time coming. I had promised some of you guys this a long time ago, but am finally getting around to it! This is a SUPER easy tutorial on how to install a back-to-top button on your blog, like you see on mine. (Seriously. If I can do it, you can do it.) So let's get started!

Notice: I have no understanding of Wordpress whatsoever. This only works on Blogger. But I am sure that if you google it, you could figure out how to do this for your Wordpress blog too.

First off, we need to make the picture that will be used as your button. If you are super awesome at Photoshop or whatever other program and can create an awesome photo, then great. This part is not for you. But some of us are not great at any of that. I like to use PicMonkey. It is an awesome (free!) site, and I use it for everything.

If you already have a background photo that matches your blog, or some other photo you would like to use, then you can go to edit (green arrow). I will be going straight to design, which is an awesome new feature they recently added (blue arrow).

If you want to make your background a color that matches your blog, that's fine. I usually use transparent canvas, so that my button will stand out on its own. (The transparent canvas feature is also great for things like blog signatures and such.) I have noticed, however, that if you are using lighter colors, it is best to use a white canvas, and then make it transparent at the end, so you can still see what you are doing.

Now, this is fun part. You can create your button to look however your heart desires. You can go to Overlays (the butterfly) and choose from the arrow options there. You can google pictures of arrows until you find one you like. You can put an arrow in a speech bubble for all I care. You can make it text that says Back to Top. You can make it whatever color, whatever you want. It's your button after all.

After you make your button, don't forget to crop (blue arrow) and resize (green arrow) to what you want. Mine is 60x60 because I prefer it smaller, but you can make it whatever size works for your blog. If you have to make a few different sizes and test out which one you like best, that's fine too.

Here are some others I've played with, just to give you an idea of your different options.

Next, you are going to save your cute little button, and upload it to a photo hosting site. (I use Photobucket.)

Now we're going to install it! Yay! Go your your blog's dashboard, then layout. Click Add a Gadget, and choose HTML/Javascript. We won't be giving it a title, and nothing else (other than your button) is going to be showing up, so it actually doesn't matter where you put it. (I actually put mine in the footer, so it doesn't get lost with everything that's in the sidebar, and I know what it is.)

Now, you're going to put this HTML into the box.

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="PUT DIRECT LINK FROM PHOTOBUCKET HERE" /></a>

Remember when we uploaded our button to Photobucket (or other photo hosting site)? You're going to take the direct URL and replace the red highlighted portion in the HTML with that code. 

(Make sure that the quotations are still there, and not accidentally removed when you replace it) 
If you wanted it on the left side for whatever reason, you would just replace the "right" with "left".

And there you have it! A super handy Back to Top button for your (Blogger) blog!

I hope you enjoyed this tutorial, and that it was easy enough for you to follow along. If you have any questions, or suggestions for future tutorials, let me know!