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.
You are here: Home > Anchor Link > Anchor Link to Skip to Top of Page and to Updates.
Anchor Link to Skip to Top of Page and to Updates.
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!
Posted by Vin
What have you to say?
8 VIEWERS CLICKED HERE TO COMMENT ON THIS POST. ADD YOUR COMMENT.
EMail this post to a friend?
Filed Under :
Labels: Anchor Link |Bookmark This Post
Skip to top of post.
YOUR COMMENTS
Buy Vin a Beer :-) if you liked this post.
Search Blog Before Commenting
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.














8 comments:
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...
Power/speed,
What is the exact code you used?
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!
Anonymous,
You will have to email me the template. Try pasting the code after this tag :
</Blogger>
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 ?
Shang Lawt,
Put the code for the link between :
<div style="text-align: right;"> LINK_CODE </div>
how to create blogroll/category at the blog.please help
Zai,
Please give full details or give link of an example.
CLICK TO LEAVE A COMMENT..... :-)
Skip to top of post.
Who is talking about the above post?