Add Floating Back to Top Icon Button to Blogger

back to topYou can tell you readers to go to the top of the page by adding a floating “back to top” icon image. It is simple and very easy to add to Blogger powered blogs.

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;

Popular posts from this blog

Add Google Web Fonts to Blogger

How to Add Extra Gadget/Widget Section to Blogger Header

Add Open Graph Protocol Meta Tags to Blogger