Wednesday 1 May 2013

How to Add - Back to Top button on Blogger?

Posted by Arun Kumar Choppara On 05:19 | 1 comment
Back to Top button is very much required if we have a blog with lengthy posts.
In such cases, we need to have a button at the bottom of the page which is static.
By clicking this button the page should go to the top of the page.

Let us see the process of adding Back to Top button on blogger.


1. We should have a button image and its address
We can either create a button using paint and then upload it to any of the blog post and get its address
(by Right click -> Copy Link Location) or
Get the address of any button image from the web.


Image link location by using (Right Click -> Copy Link Location) for the above image.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij2KwA_i7wo5x3lkiAqXTTd-dpGmY7_PjJMv8mP8GdPwD2aa3Ri6_WVzQzWmPhOCR-z8Y_A_6RxjYovym-pgOLjvHf7NbMvTrdUZn99vhTIgb70j5vsWMw1N7Jaob5ZZg1izSr1NTF1MnR/s1600/image13.png

2. We need to have code for the "Back to Top" button functionality as shown below.


<a style="display:scroll;position:fixed;bottom:5px;right:50px;"href="#" title="Back to top of Page"><img src="BUTTON IMAGE ADDRESS"/></a>

NOTE: Here upon clicking the button, the page should navigate to the address "#" (here # refers to top of the blog page).

3. Replace the BUTTON IMAGE ADDRESS text with the actual button address.

<a style="display:scroll;position:fixed;bottom:5px;right:50px;"href="#" title="Back to top of Page"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij2KwA_i7wo5x3lkiAqXTTd-dpGmY7_PjJMv8mP8GdPwD2aa3Ri6_WVzQzWmPhOCR-z8Y_A_6RxjYovym-pgOLjvHf7NbMvTrdUZn99vhTIgb70j5vsWMw1N7Jaob5ZZg1izSr1NTF1MnR/s1600/image13.png"/></a>


4. Add a gadget - HTML/JavaScript with the code that we have for Back to Top functionality.

5. Save the gadget and save template.

6. view the blog to see the changes.

If you like the post, take a couple of minutes to comment and share.
Your comments are most valuable and would help me come up with better posts.

1 comment:

  1. ==============================================================================================================
    Verified
    💥 Esto es más que un atraco. Es una guerra.
    Parte 5: Volumen 1 el 3 de septiembre. Volumen 2 el 3 de diciembre. Solo en Netflix.

    💥 This is more than a heist. This is war.
    Part 5: Volume 1, September 3. Volume 2, December 3. Only on Netflix.

    💥 É mais que um golpe. É uma guerra.
    Parte 5: Volume 1, no dia 3 de setembro. Volume 2, no dia 3 de dezembro. Só na Netflix.

    #LCDP5

    Money Heist 5 Watch HD Online For Free

    ReplyDelete

ABOUT ME

Founder & Author: Hi Friends, my name is Arun Kumar Choppara. I am a Software Engineer by profession and a passionate blogger. I have started blogging as a hobby and now addicted to it.
...Read More

Labels