Add a Floating Back to Top Button to Blogger

Back to Top Button : A button or a link used to send the visitor to the top of the web page when clicked. Many bloggers are using back to top button on their blogs. After adding this button to blogs, when visitor click on that button, that sends your viewer to the top of page on your blog. This button is useful if the blogs have long pages. This button will decrease time to scroll back to the top of page.

How to add a floating back to top button to Blogger blog : 

With simple HTML tags you can add back to top button to blogs. Here I'm showing how to add a floating back to top button to Blogger blogs. With this basic method you can add back to top button to the bottom of your screen. The back to top button will appear at the bottom of your screen even after scroll the page.
Follow below steps to add floating back to top button to Blogger blog.

Step 1 : Go to Blogger Dashboard

Step 2 : Click on Template

Step 3 : Click on Edit HTML

Step 4 : Search </body> code

Add below code just before to  </body>

 <a style="position: fixed; bottom:5px; left:5px;" href="#" title=" Go Back to Top">Add text for button </a>

Note: Replace Add text for button with your text like "Back to Top". This is button name.

Step 5 : Click on Save template.

Now to go to your blog and see floating back to button at the bottom of your screen. We can also customize this back to top button for better looking.

Adding background color to that button : 

add background: orange; tag to the above button code

Adding image to that button : 

Replace above button code in step 4 with below code
 <a style="position: fixed; bottom:5px; left:5px;" href="#" title=" Go Back to Top"><img src="Button Image Url"/> </a>

Replace  Button Image Url with your back to top button image url(link).

Like this we can add add a floating back to top button to Blogger blog and customize.

2 comments: