Friday, March 6, 2015

Back to the top! Adding a "Top of Page" button

If you've been reading my blog for any time, you probably have noticed my posts tend to be a bit long. Now you can quickly jump back to the top of the page by clicking the "TOP" arrow button on the lower left.

I followed Nitecruzr's excellent instructions:  Adding a "Top of Page" button to the blog

Here's how you can add a button to your own blog:




I made my own button with this public domain up arrow downloaded from Wikimedia commons. I may change it to something prettier in the future.

You can download a pre-made button image or create one of your own.

Upload your button image to your Blogger blog - you can leave it in a draft post - and find the image URL by switching the post editor to HTML view.

The code for the uploaded image will look something like: 

<a href="http://2.bp.blogspot.com/-Ss8eSpgHCy4/VPodMnyFpLI/AAAAAAAAEjM/3L3HVdaRTRU/s1600/TOP%2Barrow%2B80%2B2.png" imageanchor="1"><img border="0" src="http://2.bp.blogspot.com/-Ss8eSpgHCy4/VPodMnyFpLI/AAAAAAAAEjM/3L3HVdaRTRU/s320/TOP%2Barrow%2B80%2B2.png" /></a>


Find that code in your own blog post, then copy the link after src= (highlighted above). Note that you should find that link for your own uploaded image, not copy mine. Don't include the quote marks! 

Then:

1. open your blog's Layout

2. add a new HTML/Javascript gadget

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

<a style="display:scroll;position:fixed;bottom:20px;right:60px;" href="#" title="Top"><img border="0" height="60" width="60" src="IMAGE-URL-HERE" /></a>


That will position the icon on the bottom right of the page. You can see how that looks on Nitecruzr's blog.

To reposition the button, change the numbers after "bottom" and "right". I changed "right" to "left" so that the button is on the left.

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

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

If you are viewing this on a desktop computer, scroll down this page, and give it a try!


Posted by Peggy K

No comments: