Add Material Design Floating "Back to Top" Button | Blogger

22:34 0 Comments




Back to Top button or link is a link that sends your viewer to the top of page once clicked. This will help your readers navigate better, especially so if you have long pages. This link is usually located at the bottom of page or in the footer area.

What I am going explain in this article is slightly different. The function is the same yet the location of the link/button is different. As the name suggests, we are making a floating (or is it static) button. The button will float at the bottom of your screen. It will stay there even if you scroll the page, and can be seen at all times. We will do this using only a short HTML code, with a little inline styling.
Note: This trick will not work in older versions of Internet Explorer. The button will appear nonetheless, but at the center bottom of your page, and it doesn’t float.
Here are the steps:

  1. Login to your Blogger account.
  2. Go to Dashboard > Design > Edit HTML.
  3. Back up your template.
  4. Insert the following code immediately before the </body> tag in your HTML
<a style="position: fixed; bottom:5px;right:5px;" href="#" title="Back to Top"><img style="border: none;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnV7PC9A3VyDkHLEw-s27kkzUpbj9z3_Fh02IUGhH-gwb9eTpuBEoc_OIXF4Ucp0K7c-PkwUgPSm-g1zImnfKhWG1nGRAdCxrJVstIknO_Vuz9mA_pGOqoB5D77UMC8HN0Bwd8gBYuLo3U/s1600/Untitled-1.png"/></a>. 



5. You can change the location of the button / link by changing the values of this code:
bottom:5px; left:5px;

Note:

-The Material Desgin Up Arrow is made by me :)
- If u like this post please give me your comments for your feedback suggestion or help.Thanks..! -
Enjoy!




Unknown

Some say he’s half man half fish, others say he’s more of a seventy/thirty split. Either way he’s a fishy bastard. Google

0 comments:

Subscribe to: Post Comments (Atom)