How to add "Top of the page" icon to your blog?

"Top of the page" icon link is an important thing if your blog post is long. If you look carefully in my blog, just notice the bottom right corner of the browser window. There you will find a text "Top" which is floating and it's color is blue. Go through the page and you will see that the word "Top" is not changing it's position. It remains the same position. Now click on it and you will be moved to the starting portion of the current window. So, it helps to reach the top of the page form any portion of the window. It's very helpful if your blog post is much longer and people will move to the top of the page by just clicking only on it.

To create such type of "Top of the page" icon is very easy and simple to install. Only some couple of lines are needed. Moreover, you can customize it by replacing an image with the text part. This post will describe the tips and techniques to do so.

Index of this page:

• General Code of "top of the page" icon
• Description of the code
• How to add "top of the page" icon
• Example
  

General Code of "top of the page" icon:

The general code for "top of the page" icon is looks like the similar:

1. < a href="#" >
   
2. < img src="url_of_the_image"
   
3. alt="alternative_text"
   
4. title="Top of the page"
   
5. style="display: scroll; position: fixed; bottom: 5px; right: 5px;" / >
   
6. < /a >
   

Description of the code:

• url_of_the_image: At line 2, this is used between the inverted comma. This is the url of the image which you want to use as top of the page icon. Always remember, it's the url of your desired icon. So, before using any image, you must have to upload the image to any site such as, tinypic.com etc. To learn about image uploading, click here to learn more.
• alternative_text: At line 3, this option is used between the inverted commas. This is the alternative text of your image. If anybody put the cursor on the icon, he or she will see that text. This is used to give a border understanding of the new user about the usefulness of the icon by reading the text.
• style="display: scroll; position: fixed; bottom: 5px; right: 5px;" : This line is used for styling the top of the page icon. It has several fields. The fields are described below:
  
• display: scroll : This option allows the image to scroll.
• position:fixed: This option is used for fixing the image location.
• bottom:5px : This option is used to locate the position of the image. Here 5px means that the image will be appeared 5px up from the bottom of your page.
• right:5px : This option is used to locate the position of the image. Here 5px means that the image will be appeared 5px from the right of your page.

How to add "top of the page" icon:

It's very easy and very simple. Just follow the steps:

1. Log in to www.blogger.com.
2. Go to Dashboard and then select the Layout of the blog that you want to add top of the page icon.
3. Now click on the Add a Gadget.
4. Select HTML/JavaScript and click on it.
5. Now copy and paste the following code:

< a href="#" > < img alt="Top of the page" style="display: scroll; position: fixed; bottom: 5px; right: 5px;" src="http://i42.tinypic.com/33ogqxi.jpg" title="Top of the page"/ > < /a > < !-- developed by itis123.blogspot.com -->

6. Click on the Save button to save.

In following the steps, you can easily add "top of the page" icon to your blog and navigate to the top of your blog posts.

Example:
By using the codes, one blog is made as an example. To view, click http://top-of-the-page-icon.blogspot.com/. You may be used this code for your blog also. It's free to use.

If you are enjoyed this post, please consider to leave a comment at the comment section of this page or Subscribe to the feed of itis123.blogspot.com to get new articles which will be delivered to your feed reader.