Adding "Top of Page" Text Link: How to Add "Top of Page" Text 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" 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" text link of your blog or website by using only the text. Moreover, you may customize the text, color, style, size or placement by reading and applying this tutorial to your blog or website.

Steps to add "Top of Page" text link

Follow the following steps to add "Top of Page" text 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 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

By following this tutorial, it's possible to add a link to move of the top of the webpage. Here, we just put a text and by clicking on that text we are moving to the contents top. So, the text we are clicking, is obviously a link. Now, I will present the code description:

<a > </a>: This is format to add any link.

Text between <a > and </a>: This is the text actually will be displayed on your blog. In my code, I only write TOP. So, in the demo blog, it's visible as "TOP". You may use any text as you wish. For example, you may write TOP OF THE PAGE or Go to Top etc. text according to your wish. The text that you write, will be visible to the blog.

style: This is used to add style to the text link. It has several fields. All these are used for several purposes. For example,

• display: This tag defines the display type like scroll.
• position: This tag defines the position type of the link like fixed etc.
• bottom: This tag defines the link's bottom position of the window from the bottom-right.
• right: This tag defines the link's right position of the window from the bottom-right.
• color: This tag defines the link text color. For example, I use blue color.
• fond-weight: This tag defines whether the font is normal or bold or italic.

href: By this tag, we are defining the links actual effect after clicking the text link. Here the value is set as # which indicates, it will move you to the top of the current page.

To sum up, by following the above tutorials you may be able to implement the Top of the page 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