Thursday, September 3, 2009

Add a "Top of Page" Icon Link

1. Login your blogger account, click Customize.

2. Navigate to Page Elements >> Edit Html Template.

3. Copy all of the code below and paste this into an HTML/JavaScript widget in your layout, somewhere between the <body> and </body> tags instead.

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://i191.photobucket.com/albums/z47/wiraburock/BANNERKPHOCcopy-2.gif"/></a>

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.

No comments:

Post a Comment