Anchor Link to Skip to Top of Page and to Updates. ~ The Blog Doctor.
Loading...

Anchor Link to Skip to Top of Page and to Updates.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

When your blog page is too long you have to provide navigation links to enable the viewer to quickly jump to the top of the page after scrolling down to the bottom. In Anchor Links and Mail To links I described how to make such links within your post. These are useful especially if you want to make a FAQ page.


If you want a "Skip to Top" link at the bottom of your posts or in your blog footer it is better to add them in your template. You can also create a "Skip to Post Updates" link just below the post title for viewers who have already read the post and wish to read the Updates at the bottom.......


CREATE DESTINATION ANCHOR


This will be at the top of the page where you will end up on clicking the link. To create it follow these steps :

1. Login at Blogger.com.

2. Click 'Layout' link on Dashboard.

3. On Page Elements tab click 'Edit Html' subtab of Layout tab at top.

4. In Template Code box scroll down to this code :

<div id='outer-wrapper'><div id='wrap2'>

Immediately below it paste this code :

<a href='data:post.url' name='top'/>

5. Save Template.


You have just created the destination anchor for your link at the top of the page.



CREATE SOURCE ANCHOR OR LINK


The next step is to create the link itself which when clicked will jump the viewer to the top of the page. Follow these steps :

1. Login at Blogger.com.

2. Click 'Layout' link on Dashboard.

3. On Page Elements tab click 'Edit Html' subtab of Layout tab at top.

4. On Edit Html page click the 'Expand Widgets Template' checkbox at the top of the Template Code box. The Template code will expand.

5. In Template Code box scroll down to this line in the Blog Posts Footer widget :

<p class='post-footer-line post-footer-line-3'>

Immediately below paste the following code line :

<a href='#top'>Skip to top of post.</a>

6. Save Template.

7. You can paste this code line in your Blog Footer also.


Check out the links below this post.




SKIP TO UPDATES


If you have an old post you wish to update with the latest news you can put in "Skip to Update" link at the top of your post in the post editor. Follow these steps :

1. Login at Blogger.com.

2. Click 'Posts' link on Dashboard.

3. List of Posts page will open.

4. Click 'Edit' link for the post you want to update.

5. Post will open in Post Editor.

6. At the top of the post put this as the first line :

<a href='#update'>Skip to Post Updates.</a>

7. Scroll down in the Post Editor to bottom of post.

8. Type in this line :

<a href='LINK_OF_POST' name='update'>POST UPDATES</a>

9. Replace 'LINK_OF_POST' with the permalink of the post.

10. Type in your updates below it and Publish post.


Happy Blogging!


P.S. You can add a Post Update anchor link in the template also. It will then appear on every post. You can also add it in Settings----->Formatting----->Post Template so that it is available whenever you create a post.


8 comments:

power/speed said...

what do i need to add to the code to align that SKIP TO TOP to the right? I tried align="right" and it didnt worked...

Vin said...

Power/speed,

What is the exact code you used?

Anonymous said...

Hi Vin,

I was just emailing with you earlier today about links staying the "visited" color. But with this topic, is there an easy way to add the "skip to top" to the old blogger template? One problem i wonder about is that i don't even appear to have a footer in my html code (the template's great for our site, but i didn't design the it and don't know much about this issue of there seemingly not being any footer). Thanks!

Vin said...

Anonymous,

You will have to email me the template. Try pasting the code after this tag :

</Blogger>

Shang Lawt said...

Hello.. Thanks for this post.. by the way.. i would like to know how to put that "skip to top" word to the right side in post footer..could you please tell me ?

Vin said...

Shang Lawt,

Put the code for the link between :

<div style="text-align: right;"> LINK_CODE </div>

zai said...

how to create blogroll/category at the blog.please help

Vin said...

Zai,

Please give full details or give link of an example.

CLICK TO LEAVE A COMMENT..... :-)



Skip to top of post.

Search Blog Before Commenting

Loading...

Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,

Vin.

The Blog Doctor The Blog Doctor2 Blog Doctor Home

SUGGESTED READING

Tips On Blogger and Latest News.



Skip to top of post.