Back To The Top! Adding A Meridian Of Page Button

If you've been reading my spider web log for whatever time, you lot likely convey noticed my posts tend to travel a flake long. Now you lot tin apace saltation dorsum to the exceed of the page past times clicking the "TOP" arrow push on the lower left.

I followed Nitecruzr's first-class instructions:  Adding a "Top of Page" push to the blog

Here's how you lot tin add together a push to your ain blog:

I made my ain push amongst this public domain upwardly arrow downloaded from Wikimedia commons. I may alter it to something prettier inwards the future.

You tin download a pre-made push ikon or practise 1 of your own.

Upload your push ikon to your Blogger spider web log - you lot tin exit it inwards a draft post service - in addition to honor the ikon URL past times switching the post service editor to HTML view.

The code for the uploaded ikon volition await something like: 

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaczOuyc0wqbzrIgdScLfA6ospzO5JtAY2R9b4k4Lg5fisPeljxa2xBGuXnWzxdPGFtqLHsTej03F1OWLqBJPe6I64HVMUrJGJieweuW-03TPO43PjKEcwpwBZoLZpKvWn55fI-YNsQzzz/s1600/TOP+arrow+80+2.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaczOuyc0wqbzrIgdScLfA6ospzO5JtAY2R9b4k4Lg5fisPeljxa2xBGuXnWzxdPGFtqLHsTej03F1OWLqBJPe6I64HVMUrJGJieweuW-03TPO43PjKEcwpwBZoLZpKvWn55fI-YNsQzzz/s320/TOP+arrow+80+2.png" /></a>

Find that code inwards your ain spider web log post, in addition to then re-create the link afterwards src= (highlighted above). Note that you lot should honor that link for your ain uploaded image, non re-create mine. Don't include the quote marks! 

Then:

1. opened upwardly your blog's Layout

2. add together a novel HTML/Javascript gadget

3. Paste inwards this code, adding your ikon URL where indicated (IMAGE-URL-HERE):

<a style="display:scroll;position:fixed;bottom:20px;right:60px;" href="#" title="Back to the top! Adding a Top of Page button"><img border="0" height="60" width="60" src="IMAGE-URL-HERE" /></a>

That volition seat the icon on the bottom correct of the page. You tin meet how that looks on Nitecruzr's blog.

To reposition the button, alter the numbers afterwards "bottom" in addition to "right". I changed "right" to "left" hence that the push is on the left.

I'm using bottom:20px; left:10px; to seat the push on the lower left of the page.

The ikon does non appear on the mobile version of my blog, because the Blogger mobile template doesn't include the sidebar gadgets.

If you lot are viewing this on a desktop computer, scroll downward this page, in addition to order it a try!