|Q. What are Anchor Text Links & what purpose does it serve ?|
A. Anchor links is a tool which helps user to navigate a webpage from one point to other points. Sometimes, a post/article may be too big which may be inconvenient for the user. So an Index in the beginning can help the user to directly point to different sections of that article.
We can create anchor text links by providing two types of effects -
1. Anchor Text Link – Jump Break (Instant Jump) using simple HTML
2. Anchor Text Link – Smooth Scrolling Sliding Effect using JQuery
1. For applying Anchor text link, Go to Source Code of your Blog Post.
2. Locate the TEXT which will point to different sections of your post/article. (It may be your Contents/Index of the Article). For e.g. In my case, I will create Anchor linking on
“1. Anchor Text Link – Jump Break (Instant Jump) using simple HTML”
|<a href=“#JumpBreak”>1. Anchor Text Link – Jump Break (Instant Jump) using simple HTML</a>|
4. Now Go to the point of your article where you would like to jump to when the Anchor Link is clicked upon. For e.g. in my case, I will go to the point “A. Create Anchor Text Link – Jump Break using simple HTML”. Apply following syntax here -
|<a id=“JumpBreak”>A. Create Anchor Text Link – Jump Break using simple HTML</a>|
5. That’s it, Save your post & check if everything is working properly. You can also “Create Back to Top” link by following same method. Apply following syntax for going back to your Index/Content/Menu section of your Post.
After your article completes, you can provide “Back to Top” link by applying this code –
B. Create Anchor Text Link – Smooth Scrolling Sliding Effect using JQuery
2. Upload the file to your Hosting A/c. If you do not have any hosting account, then you can host your file to Google Code. Fill up the form with details as per the screenshot below (Click on images to Enlarge):
4. Go to your Blog –> Template –> Backup/Restore –> Download XML file for Safety
5. Go to your Blog –> Template –> Edit HTML –> Proceed
6. Paste this code just below <head> tag as follows -
<!--JQuery Anchor Link Sliding Effect Script START //-->
<!--JQuery Anchor Link Sliding Effect Script END //—>
7. All done, Save your post & Refresh to see the beauty of sliding effect of Anchor Link Texts.
|Facebook Like Box Widget for Blogger | YourBloggingTips|
|How to Create a Facebook Like Page for Blogger | YourBloggingTips|
|How to Host your files free of Cost using Google Code Project | YourBloggingTips|
|If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you Subscribe to our regular Email Updates!|