Adding A "Top Of Page" Button To The Blog

This week, I added a gadget that's been needed, on this blog, for some time.

You may see my new "Top" button, at the lower right corner of this blog. If you have a normally wide browser window, with wallpaper showing on either side of the posts / sidebar section, you'll see the new gadget floating on top of the wallpaper. If you have squeezed your browser window to save horizontal space, you may see the new gadget floating on top of the sidebar (but beneath the sidebar gadgets).

This is an extremely easy tweak to add. The hard part was finding - and sizing - the icon that I used.

To find a suitable icon for the button, Google for it.

To find the icon, Google Is Your Friend. Just look through the search listings, until you find one that fits with your blog.

free up arrow icon

Once you have found an icon that you like, download to your computer - then upload to your blog - politely. Don't hot link icons.

• Hotlinking is rude, and may abuse somebody's limited bandwidth.
• Hotlinking depends upon somebody's intention to host their icons, using their service, for eternity (however long you publish your blog, anyway).

Once your chosen icon is saved as a blog image, setup the button code.

Once you have your icon politely saved as part of your blog, add an HTML gadget - and add the gadget code, in the Content window of the HTML gadget.

<a style="display:scroll;position:fixed;bottom:20px;right:60px;" href="#" title="Top"><img border="0" height="60" width="60"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2eOcCRS3N1_JwNrk6zva82CQybo8TWCvgMs6lUtZhyl_6XrkbjWP8Ayf2eQLtg3KEaUMruYNMT3uHK7llf3gltPNd6PMaMEjSWXuTpPzCX-fAebzTg5xQTb9kdRRiRhVVm347DAyfZzdk/s320/Up+Arrow+4.jpg" /></a>

Here's the magic.

style="display:scroll;position:fixed;bottom:20px;right:60px;"

That positions the icon in a fixed location on the screen. The new HTML gadget contains the code - and can be located anywhere in the blog. The magic determines where the icon is displayed.

Adjust settings, to make the button appear in an acceptable screen position.

Adjust "Bottom" and "Right" values, to position your new icon in the desired location, for your blog. Resize the browser window a few times - make it narrower and wider - and get an idea how the final location of the icon may vary. Test in different browsers, too.

This is my icon:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2eOcCRS3N1_JwNrk6zva82CQybo8TWCvgMs6lUtZhyl_6XrkbjWP8Ayf2eQLtg3KEaUMruYNMT3uHK7llf3gltPNd6PMaMEjSWXuTpPzCX-fAebzTg5xQTb9kdRRiRhVVm347DAyfZzdk/s320/Up+Arrow+4.jpg

Your icon will have a different URL. Use your own icon, please!

Then sit back, and enjoy your blog, with its new navigational aid.

A caveat.

If you add your "Top Of Page" button code into a page or post, never switch between Compose and HTML modes, when editing that page or post.