HTML Editing-Add Go To Top Button Or Image To your Posts ~ SAMPATKUMARI'S Blog "PARISHKAR"

HTML Editing-Add Go To Top Button Or Image To your Posts

HTML Editing-Add Go To Top Button Or Image To your Posts- While reading blog posts some times we find large blog posts. In such posts we scroll down as we read it but after completing the reading we have to scroll up back and how better it will be if we reach top of the post in a single click. It is possible by making a small arrangement in our blog’s HTML file to add a button. We can use an image button or a text button. I have tested it in both Google chrome and Mozilla Firefox and it works very good.
HTML Editing-Add Go To Top Button Or Image To your Posts
HTML Editing-Add Go To Top Button Or Image To your Posts

To edit your blogger template Go to your blogger dashboard>click Template>Click edit HTML. The Blog’s HTML document will open.

Now you have to find the closing/ending tag </body>

To find the above tag click anywhere in the open HTML file and press CTRL+F, now the html search box will open.

Type </body> in the HTML search box and press Enter.

The closing/ending tag </body> will be highlighted.

Now you have two options-


Option-1 - If you want to use a text button

Copy and paste the following code just above The closing/ending tag </body>

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

Note-

1.   Change the text in red to what you want t appear on your page. For example if you want to appear “Top”, “Go to Top”, ”Back to Top”, ”Go to Start” or any other word/Text on your page. Whatever you write here will appear on the page.

2.  Initially the button will appear in bottom left. You can move it to right by increasing the figure in Green. More you increase this figure more the button will move to right. If you change the figure to 150 the button will move to centre.


Option 2 - If you want to use an image instead of text button

Copy and paste this code just above </body>

<a style="position: fixed; bottom:5px;left:5px;" href="#" title="Back to Top">
<img style="border: none;" src="copy and paste your image URL here "/>
</a&gt;

Note -
Initially the button will appear in bottom left. You can move it to right by increasing the figure in Green. More you increase this figure more the button will move to right.



1 comment:

  1. Nice tips Sampat Kumari jee :)

    ReplyDelete