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.

Publishing A Gadget To A Specific Page

Long before Blogger developed static pages, blog owners had wanted to have some accessories or gadgets visible only on specific pages.

Initially, we discovered that gadgets could be displayed conditionally, based upon the URL being displayed. This is a fairly simple task, when you get used to it - but it requires editing the template HTML - and can look a bit scary, to those inexperienced in template editing.

Recently, we realised that some gadgets can be embedded in a page or post, by editing in HTML mode - and accomplish the same. I demonstrated my custom "Contact Me" gadget, using that ability.

Both the technique of embedding a gadget in a page or post - and of conditionally displaying a gadget - have their advantages, and their disadvantages.

Embed A Gadget In A Page Or Post

My custom "Contact Me" gadget, which is provided by Google Docs as an IFrame embedded page, is published in my static page "Contact Me, Improved".

<iframe src="https://docs.google.com/forms/d/1JvoY2yf5aTChnvXlCgGsUerSCtI7RHpRdkq5SPBPm90/viewform?embedded=true" width="700" height="800" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>

That's the code for my gadget - you can make your own, in 10 - 15 minutes. You can use this technique with any Google Docs based file.

My expanded Followers gadget is part of my static page, "Followers". The code for that page was provided by Google Friend Connect, and is no longer available. You may now install the "Followers" / "Google Friend Connect" gadget, using "Add a Gadget".

The Followers gadget is JavaScript based, though - and the rendered gadget code can be extracted from the blog source, using any suitable text based browser. Having extracted the JavaScript, it can be added to any page or post, in HTML mode, just as I did to make "Contact Me, Improved".

Display A Gadget, Conditionally

Gadgets which are provided as XML, and do not provide convenient rendered JavaScript code, cannot be easily embedded in a page or post. These gadgets will still be added using "Add a Gadget", and will require the conditional template tweak. My Labels index page, "Topics", is an example of this technique.

Any BlogList or LinkList gadget can be found as rendered HTML, and the code can be extracted - again, from a blog source listing - but both bloglists and linklists are dynamic - and frequently long. If you extract the rendered source, you get a static copy - - which is fine, if you never plan to change your list.

The blog has half a dozen lists, of various types - and I like to add or remove list elements, whenever necessary. I enjoy the Quick Edit feature of the "Peer Resources" bloglist, for instance - and have no intention of publishing that bloglist as a static HTML based linklist. If I was to display "Peer Resources" on a specific static page, I would use the earlier technique of editing the template XML code, and adding a conditional.

It seems as if it should be possible to add XML code, directly, into a page or post. If I discover the appropriate technique for doing that, I will surely update this post.

Know The Alternatives

Just know the alternatives, and choose wisely.