Floating Back to Top Button for Blogger

Wednesday, 21 November 2012

Floating Back to Top Button for Blogger

You have seen back to top buttons on many blogs and also may like this style. Some bloggers may also want to add this type of button for their blog. This button not only increase the attraction but also provide ease for the users to go back to the top of the page.

Why Back to Top Button Require?

Back to Top button is used for the blogs those have a lot of post on their Home page or they have very lengthy posts on their blog. So when a user start reading the and scrolling down until the end of post and if he wants to go top to the Menu Bar of the blog then scrolling back to the top is time taking process, so if there is a Back to Top button on the blog then it is just single click method to go back to the top.

Here is the code for Two type of buttons, the both are merged and displayed with the mouse over the button. Follow the steps.

Go to blogger Deshboard
Select Layout and then click "Add a Gadget"
Click on HTML/JavaScript option
Now paste the following Code.

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img onmouseover="this.src='URL Of Your Larger Button Image'" src="URL Of Your Smaller Button Image" onmouseout="this.src='URL Of Your Smaller Button Image'"/></a>

This is combination of two buttons, large and small to show difference when you take mouse pointer to the button.
Note: You can add image in new post by adding image and get the link from HTML editor and keep this post in draft.