Adding Floating Back to Top Icon Button to Blogger

For those who don't know, it is an up icon which indicates to directly go back to the top of page the reader is reading. This can be found floating mainly in bottom right-hand corner and in some blogs at bottom left-hand. A simple but effective way.

The Easy way

Step 1: Go to Layout tab and add a "HTML/JavaScript" gadget.

Step 2: Within this gadget, add the below codes:

<div style="position: fixed; bottom: 5px; right: 5px;"><a href="#" title="Back to Top"><img src="http://an-up-arrow-image.png"/></a></div>

Step 3: Save it. You can move this gadget at the very bottom of your layout.

The Advanced way

Step 1: Go to Template tab, click "Edit HTML".

Step 2: Find </body> and before it add the above told code in "the easy way step 2".

Step 3: Save your template.

Explanation

You have to change the image by changing the URL marked in green to your uploaded image.

You can also re-position the "back to top" icon button by changing bottom: 5px; right: 5px;. To position the button further away from the right or bottom sides, simply increase the pixels value, like, bottom: 10px; right: 10px;