Adding "Top of Page" Icon Link: How to Add "Top of Page" Icon Link on Your Blog or Website

Many of the websites or blogs posts have a small text or image floating at the bottom-right or bottom-left or bottom-center. If you click on that text or image, you are redirected to the top of the current page. This is the "top of the page" icon link. It's really very helpful for all if the web-page or blog post has lengthy posts. This customization feature helps the visitors or readers to move to the page's top area. The great pleasure is that this customization feature is very easy to implement. You just need to add some lines of code. This page contains the information to add "Top of Page" icon link of your blog or website by using only the text.

Steps to add "Top of Page" icon link

Follow the following steps to add "Top of Page" icon Link:

Go to www.blogger.com and log in to your account by using your username and password. After successfully log in, you will be redirected to Dashboard. In the Dashboard page, you will find all the blogs under your account.

From the "Dashboard", select the blog that you want to add top to of the page link. After selecting the blog, click on the Layout link of that blog. Very soon, you will be redirected to the "Layout" of your desired blog. From the "Layout" window, click on the link Page Elements.

Follow the following procedures:

1. From the page Layout's Page Element page, click on Add a Gadget link.
2. A new window will be opened and from there, click on HTML/JavaScript option. By clicking this one HTML/JavaScript page element window will be added to your blog template.
3. Now, you have to add some code. Just copy the following code and paste to the Configure HTML/JavaScript's Content box.

   4. After the following step, click on Save to save the code.

And that's all. View your blog and you will see the that there is a Top of the page icon link on your blog. In the following section, you will see the demo of this tutorial and the code description to modify according to your choice.

One blog is implemented by using the code and this tutorial. This is just the demo of this tutorial. This demo will present the live view of this tutorial and what will be the effect of this tutorial. To see the live demo of this tutorial, click on the following link:

Click here to see the live demo of this tutorial

Line 1: <a href="#">
This line targets the top of the current webpage

Line 2: <img src="url_of_the_imageimage"
By this code, the URL of the image icon is defined. You must have to put the URL between the inverted comas.

Line 3: alt="alternative_text"
This line of code is just jor the alt text for accessibility

Line 4: title="Back to Top"
This will produce hover text. If you put your cursor then you will see a text line "Back to Top".

Line 5: style="display: scroll;
By using this code, you can scroll the image.

Line 6: position: fixed;
This line just fixes the image.

Line 7: bottom: 5px;
This line of code enables the image to appear 5px from the bottom.

Line 8 & 9: right: 5px;" /></a>
The above lines of code enable the image to appear 5px from the right and then closes all tags.

To sum up, by following the above tutorials you may be able to implement the Top of the page icon link on your blog or website. If you have any problem, ask in the comment section and I will try to solve your problem.

© This tutorial is written by Blog.
For more blogspot tutorials, visit http://hubpages.com/hub/blog-index