Wednesday, 10 April 2013

How to create a "Back to Top" floating button EASY!

This is one of the easiest codes, and one of the most important for your blog.

It gets so frustrating in a long list of posts to get back to the top of a blog... this alleviates that frustration.

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="YOUR ARROW IMAGE URL GOES HEREwidth="50px"/></a>

It's that simple!

If you like the arrow image I am using on the bottom right hand of your screen, simply right click and copy image url or Save Image As. There are a gazillion free transparent arrows on the web, just have a search and you should find one you like. Just remember though to make sure it is legally free. Just right click the image and "copy image URL".

A few tweaking options are as follows:
  • If you want the image to appear in the bottom left hand corner, simply change  right:5px to left:5px. You can play around with where the image "hovers" by adjusting these figures and previewing the results.
  • If you want the words displayed when hovering over the image to read differently, simply write your own text where it currently says "Back to Top"
  • You can change the dimensions of the image by adjusting the images dimensions in this part of the code, width="50px".
Installing the code:

Go to your blog's "layout", add a gadget, paste the code into the content field and click save.

When you view your blog, your "Back to Top" image will be in place! You will also see a small box where you placed the new gadget. This is an unavoidable addition from this code. As you will see on my blog, I just dragged the new gadget to the last in my row, so it looks like an underline!

Your done, hope you enjoy this great, and simple code.

No comments :

Post a Comment

Facebook Twitter Google + RSS Feed Email Me