"Back to top" button tutorial

Hi everybody! Are you ready for a new blog tutorial here at Design It Chic?! So let's get started then! Without further ado, the topic for today is: add a floating "back to top" button. This tutorial is going to be fun and simple, so what are we waiting for?!.. Let's start the party!



1. First step, you have to upload your own picture to an image hosting website, such as Flickr, ImageShack, TinyPic, or any other.

2. Now you're ready to get to the next step, so you need to sign in your blogger "Dashboard", go to "Design" and then press the "Edit HTML" tab.


3. Next, scroll down the page until you find this tag, or simply use the Ctrl + F (for Windows users) or Command + F (for MAC users) combination on your keyboard to find it faster:

</body>


4. Once you found it, add the following piece of code right above it:

<div style='position: fixed; bottom: 5px; right: 135px;'><a href='#' title='back to top'><img src='IMAGE URL'/></a></div>

5. Now you need to replace the IMAGE URL text in the above code, with the actual URL of your image uploaded on an image hosting website. The end result should look something similar to this:


6. You can change the placement of the button by changing the numbers in the code. The higher the numbers, the farther away from the respective sides of your blog, the button will be.

7. After adding your image URL and customizing the distance between the button and the bottom/right sides of your blog, preview your work, and if everything works out as you want, you can now go ahead and click "save template".

That's it! Hope you guys enjoyed this little tutorial!:)

And don't forget, if you missed anything here at Design It Chic, you can check the Blog Tips button at the top of the page for more tutorials, tips to improve your blog's traffic and other amazing how to's, all presented on different levels, from beginners to the more advanced ones!
Have a great day everybody!