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.
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>
<img style="border: none;" src="copy and paste your image URL here "/>
</a>
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.
how
to add a smooth scroll back to top button, scroll to top, blogger, blogspot,
How To Add Download Button in Blogger And Link, how to add a button with link
in blogger, blogger tutorial, blogger tricks and tips, how to add a different
types of buttons in blogger, HTML Editing-Add Back To Top Button Or Image To
your Posts, Two Options for back to top button,
How to Add a Text Back to top button, How to Add an Image Back to top
button, How to move Back to top button