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.
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 icon
alt="alternative text" <-- Alt text for accessibility
title="Back to Top" <-- This will produce the hover text
style="display: scroll; <-- This allows the image to scroll
position: fixed;<-- This fixes the image in place
bottom: 5px; <-- Makes the image appear 5px from the bottom
right: 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.
52 Comments:
It works beautifully.. Thanks Amanda!!
Some days ago, Gem@ wrote a tutorial about random icon link, perhaps you'd like to have a look, I liked it very much:
IMAGEN FLOTANTE ALEATORIA
I love you like my little blog!
You made my life simpler once again, Amanda.
Thanks really.
thank you amanda! you're a genius! :)
For Yo Misma: Thanks for the link there. That's a really useful widget by Gem@ :)
I've looked into the possibilities of random images before, but hadn't considered how this could be used for a static/scrolling icon like this.
At the moment I'm developing a script to change the background/header banner depending on the time of day. It's working beautifully in my test blog so far, so I'll likely post this one over the weekend.
For Lady Java, Guardian Angel and Jean Chia: I'm glad to know this tutorial has worked well for you all. I was surprised how easy it was to install this widget, and for me it's been really useful so far! Thank you all for your comments :)
Excellent, very easy to install. Some of my blog posts are long and this feature is of great help.
Thanx Amanda.
Hi Amanda,
there's a typo here I believe:
"I came across a really feature"
a word or 2 missing in between :)
Thanks Amanda, this worked perfect for me!
Amanda,
Just thought I'd let you know of some issues I am having.
First of all, La Blogueria is gone. I tried to go there, but apparently the blog has been moved/removed.
Second, I tried to implement this, but it wouldn't appear where I wanted it to, nor would it scroll along with me. So I thought I would go see what it was supposed to do when working correctly. In both of the other two example blogs you provided, I see the images at the top, but they are stuck there.
I am using IE 6, which could very well be an issue. My work computer does not allow Firefox, so I haven't been able to check this yet. Just thought I'd let you know, to see if you can perhaps reproduce this problem.
Amanda,
Great, simple to use addition to my blog. Very helpful, however I wasn't totally done with it. I ended up modifying it and adding another to the bottom left side that directs everyone to my "home" page. Take a look. What do ya think?
http://azmacks.blogspot.com
thanks Amanda..you are the greatest..lovely stuff here, thanks a tonns.
Amanda I love it, your posts are easy to follow, everything on your site is fantastic, I love coming here :) thank you mwah x
I jz started my blog a few days ago and i came across ur blog through my dashboard. Ty for your effort to make new bloggers life easiser!
Geesh...thnx...that was really helpful. You're on my list!
very educating blog! thanks!
thank you Amanda, i find this widget very useful. So, i want to ask for your permission to right an article in my blog in frenh to share it with french blogger. and I will add blogbuster in my love link to promote your blog because i find it is very interesting and educating.
Thank u for everything
i fofot my blog is : www.technoramablog.blogspot.com
wow! cool!
thanks Amanda :)
This doesn't work for me with IE 7. Anyone have a solution? A huge portion of my readers are using internet explorer...thank you!
wow...this is great....thanks a lot, another great post.
Great site. good information, fast download and easy to navigate.
my website is yours.
Good luck to you!
worked like a champ.
Great tip, thanks a lot :)
Hello Amanda,
Great site. Good information, very fast download and easy to navigate.
Goji Berries | GoChi
Thanks Amanda..
I love this hack. It is so simple to install and works like a charm. Thanks again. Amanda.
See all of Amanda's hacks here at work:
Make Money Online
Thank you. it works.
I like the link to show the words "back to top" instead of the arrow icon. I replaced the image tag and type in "back to top". It works but the words "back to top" shows in white color. It is hard to see. I switched to Rich Text Editor tab amd changed it to red color. Then the blog automatically revised the code, which makes it not working! Any one advÃse me how to change the link color successfully? Thanks.
I figured out. I have to go to where the widget is located to change the link color. For example, if I place the Javacript element in the footer section, I have to go to the "layout">"Edit HTML">, scroll down to:
.footer a {
color: #1B703A;
}
and change the color code. I can even keep both the text and the icon to show too. Thanks again, Amanda. Your article is very useful
hello
Thanks a Million. I think I'm pretty lucky to have found your Blogger Buster site after only putting up my blog a few days ago.
Will definitely be making some changes to my site.
Thanks for the tip!!
Thanx Amanda.it worked like a charm on my blog Avinash which i started a month back.
For those who want it to work in internet explorer, find the tag < body > in the template and replace it with < body id="top" > (remove the spaces between the brackets < > ). Then in the code provided by Amanda, replace href="#" with href="#top"
thanks for sharing... i've done...
Thank you very much for this tutorial, I have used it!
Thanks a lot for sharing bro. I will be applying it my blog too
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!
Thanks a lot Amanda.
Now i will use it for rss too.
again Thanks
Simple but yet great and useful widget. Thanks!
nice one. thanks mate
www.rowallpapers.com
Post a Comment