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.
No comments:
Post a Comment