While researching blog designs, I came across a really feature: an icon link to the top of the page which floats in the bottom right-hand corner. As a blog reader, I found this feature to be really useful as it enabled me to jump back to the top of the page after reading a long article or browsing through many posts on the home page. Take a look at the bottom right hand corner of this blog for an example of this in action.
This customization is surprisingly easy to install. You can simply add the code required into an HTML/JavaScript widget in your blog's layout or, if you use a Classic Blogger template, add this code directly into your template code.
So in this post, I'll explain how to add an icon link to the top of your blog with an example image and code for you to use this right away.
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
How this works
The icon is styled to appear in the bottom right-hand corner of the page (no matter what screen resolution a visitor uses to access your blog), and is linked to target the top of the page using the "#" symbol.
The icon link used in this blog is small and unobtrusive; to help new visitors understand how this can be used, I added title text to the image so the "Back to Top" prompt will appear when the visitor hovers their mouse over the link.
The code used to add a "Top of Page" icon link is constructed as follows (I have forced line breaks for clarity):
<a href="#"> <-- This link targets the top of the page<img src="url-of-image" <-- The URL of your iconalt="alternative text" <-- Alt text for accessibilitytitle="Back to Top" <-- This will produce the hover textstyle="display: scroll; <-- This allows the image to scrollposition: fixed;<-- This fixes the image in placebottom: 5px; <-- Makes the image appear 5px from the bottomright: 5px;" /></a> <-- Makes the image appear 5px from the right,
then closes all tags
How to install the "Top of Page" Icon Link
To use an icon link like the one used here at Blogger Buster, simply copy all of the code below and paste this into an HTML/JavaScript widget in your layout:
If you use a Classic Blogger template (with no drag and drop widgets), you can paste this code into your blog's HTML code, somewhere between the <body> and </body> tags instead.
Customizing the Icon Link
If you would prefer to use a different image than the one used here, simply replace the URL of the image with the URL of your preferred image instead.
You can also reposition the icon to suit your design needs. For example, if you wanted the icon to be flush with the bottom right corner (no space), change the code explained above to read this instead:
position: fixed;
bottom: 0px;
right: 0px;
To position the icon further away from the right or bottom sides, simply increase the pixel value to reflect this distance.
Some Examples of "Top of Page" Icon Links
You needn't be restricted to using an arrow for your top of page link! Some of the designs I showcased in this recent post used ingenious methods of linking to the top of the page:
Left: La Blogueria uses paperclips to link to the top (and other parts) of the blog.
Center: In Tuneando el Blog, the icon link is animated when the mouse hovers over it!
Right: This page curl at the bottom right of Mi-Microsmos is a cleverly disguised (and very stylish) link which features a prompt on mouseover.
I hope this tutorial has been useful and helped you create your own scrolling icon links to the top of your blog.
If you have found this post useful, please consider subscribing to Blogger Buster for updates of new articles as they are published.
14 comments:
thanks... i finally found the way to do it...
I've no idea what would happen to my blog without BloggerBuster. I've lost the count of tweaks which I've used from this site. Thanks a lot for this and all others.
Could you please help me by telling me how to configure the Adsense widget with 'Popular Search' and a separate 'Search Box' ?
Manish :)
Geez!!! Thanks a million, looking for this for a while ready glad to get it up and working.
One problem I have - although it works beautifully, but anyway for me to 'hide' the widget? On my blog you can see right at the bottom of the sidebar, the 'Back To Top' widget shows and I have no idea how to hide it from view. Help is appreciated. http://daz-fishing.blogspot.com/
Hi,
That was quite idea....Thanks
thank you amanda for article
thank you!
Thanks for this hack. This is one of a few that I have implemented at Clicking Daily.
I went ahead and installed it directly into the html rather than use a widget. The one thing I found is when I put it after the body tag, it didn't work. I put it immediately before the closing body tag and had no issues with it.
its miracle,,
Thk u v much for this article,,,
regards
donkissotes
This is a great widget BUT it doesn't work in IE on my blog and the "top" ID doesn't solve it!
The problem I have is that in IE the arrow doesn't scroll with the page! When I enter the html the arrow and "back to top" just sit wherever I've put them in the body :
So if you scroll all the way down you'll find my "top of page" widget just sat on the bottom of the page:
http://giantsorbitting.blogspot.com/
Does anyone know a solution to this?
That's great. Thank you very much my friend!
to make it work on all browser replace href="#" not with < body tag id id="top" & href="#top" but with href="javascript:scroll(0,0)"
by the way Ghostery detect 8 trackers on site.
by 'Search this site...'
2 clear
onblur='if(this.value=="")this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value="";' type='text' value='Search this site...'/>
demo: MoDs.sub.cc
Thanks a for for the tutorial it was really easy & worked.
thanks for your post, amanda !
thanks so much it works great!
Post a Comment