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.
Once you have found an icon that you like, download to your computer - then upload to your blog - politely. Don't hot link icons.
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.
Here's the magic.
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.
There it is!
Isn't it shiny?
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:
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.
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="httpshttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXqd02Wljw9Mbhw35kjXfCJfsdWP4B7ITNDDExWz5AcUKbbRWmhBYGvV3ebzzJNoEb03JqocenQ5BcH8OuVtyWIdRstuAetcRiiC4mL78vYMm3R00upng_RVor6a7tJDavAwCW_g/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/AVvXsEhXqd02Wljw9Mbhw35kjXfCJfsdWP4B7ITNDDExWz5AcUKbbRWmhBYGvV3ebzzJNoEb03JqocenQ5BcH8OuVtyWIdRstuAetcRiiC4mL78vYMm3R00upng_RVor6a7tJDavAwCW_g/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.
Comments
I had a lovely balloon one that just disappeared one day. Hmmm.
The one I use now is a basic arrow and it is a great addition.
http://ntyag.blogspot.in/
I setup a post, long ago, that I use for uploading pictures that I add to the template. You could also use a static page.
I called mine "Images". Another title, that you might use, would be "Do Not Publish This Page!", as a reminder - and to make it easy to find using the Pages (Posts) list. Just leave the page / post as a Draft, add images / photos / pictures when convenient, and use "Save" (never "Publish"!) before Closing.
http://blogging.nitecruzr.net/2006/10/using-images-in-your-posts.html
I uploaded a picture to my desktop and put in in a post titled, "Draft_Image" and Saved. Next, I copied the post HTML to a HTML/JavaScrip gadget. How do I get it to the bottom left?
Luci
I rewrote the post somewhat with more detail. See if my rewrite answers some of your questions, please.
I made my own Back to Top icon and it sucks. I will revise it later, but I want to see if it is working properly at your end. Luci
Your button looks fine, and it works. Why are you thinking it sucks?
Very useful tip and very easy to implement!
Thanks.
Now I have this question:
Would it be possible for the arrow to appear only when the visitor has scrolled down say 800px?
I would like my arrow to appear on my sidebar, but my sidebar is full with content, so I want it only to appear below the sidebar content.
thanks in advance.
It's possible for the arrow to appear only when the viewer has scrolled down some distance, yes. I've seen this feature on a few websites - and have considered trying it.
One caveat - it requires JavaScript - not straight HTML. People who block scripts from unknown websites may not see your arrow, unless they adjust their filters. And there is always some risk, when adding unknown code, to your template.
But I may see what's out there - so watch this post.
Thanks for your reply. I'd prefer to avoid JavaScript.
I spent many hours trying to reach my desired effect, which is the button to appear below the sidebar and then stay fixed.
To achieve this I have tied to play with z-index.
Right now, after much experimenting I have reached the desired visual effect, but the link is not click-able. Any ideas? [I have currently intentionally placed the link out of center, in order to help troubleshooting.]
see: www.roulette30.com
PS: I don't know if this is the right place to post this. Maybe I should post in blogger help forum? Thanks anyway.
Just a quick note to tell you that I finally (after 8 hours experimenting) managed to show the button in my sidebar, below the sidebar widgets.
In the template editor, add to the sidebar css:
-----------------------
position: relative;
z-index:2;
-------------------
Put the "to the top" gadget, in another place in blogger layout, except the sidebar and add to the original code the style attribute: z-index:1;
[You can see it applied at www.roulette30.com]