 | 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 |
The most popular among the web designers, bloggers & surfers is the smooth scrolling effect for comfortable navigation across the web page.
A. Create Anchor Text Link – Jump Break using simple HTML
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
1. Download a JavaScript code. Click here to download the file.
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):
 |  |
3. After uploading the Javascript file to your Hosting A/c or Google Code Hosting servers, Go to that file & note down its destination URL. Screenshot is attached below:
 |
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 -
| <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'/> <!--JQuery Anchor Link Sliding Effect Script START //--> <script src='Your Link of Javascript uploaded' type='text/javascript'/> <!--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.
 |
 | 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! |
Posts
0 comments:
Post a Comment
If you like the post, please share it or reply to me