How to create jump links in blogspot and wordpress

How to create jump links in blogspot and wordpress
Table of contents

1. What is jump links?

2. Why jump links are important?

3. How to create jump links?

4.Example for creating two jump links in the same post.

Jump links are a links which directly take you to the part of the same post where you want to go or you want to take your visitors without scrolling the full page. Jump links work great with lengthy post or articles it gives best user experience.

Jump links are important when your article is bigger than 800 words or have many sub headings. You can directly go to the part of the post without scrolling or reading the whole page. Jump links will create a great visitors experience as they are not bound to read or scroll whole page. They can easily navigate to the part of the post by just clicking title or subheadings of the part.

Examples are from this same post. You can click on table of contents headings on this same post and see how jump links works.

Step 1 

You will need this two codes.

1. <a href="#jumplink"> Demo Jump Link </a>

2. <div id="jumplink" > Target </div>

Step 2 
You will be adding code 1 to you 1st heading (means table of contents.) 
Add 1st part of code in html <a href="#jumplink"> than add TITLE and end with end tag </a>
After that it will look like this (example from this post for reference.)
<a href="#jumplink"> 1. What is jump links? </a>

Step 3
Now you need to add 2nd code to the subheading in article (means where you want to jump)
Add 1st part of 2nd code <div id="jumplink" > than add TITLE and end tag </div>
After that it will look like
<div id="jumplink" > What is jump links </div>
Add above code to where you want to jump.
This code will work in both wordpress and blogspot sites.
Note : you need to change ID for every different jump link you make in the same post.
You will be using same code just change ID of the second jump link as below.

Step 1
You will be adding code 1 to you 2nd heading (means table of contents.) The code has been changed little bit. I have highlited the changes with green highlight.
Add 1st part of code in html <a href="#1jumplink"> than add TITLE and end with end tag </a>
After that it will look like this (example from this post for reference.)
<a href="#1jumplink"> 2. Why jump links are important? </a>

Step 2
Now you need to add 2nd code to the subheading in article (means where you want to jump)
Add 1st part of 2nd code <div id="1jumplink" > than add TITLE and end tag </div>
After that it will look like
<div id="1jumplink" > Why jump links are important </div>
Add above code to where you want to jump.

If you are still confused don't worry come back again I will upload a video for the same process and please do comment if you are waiting for video presentation.
About author

Dipen Shah

Dipen Shah : Author

Motivational speaker, Business consultantpolitical analysts.

Protected by Copyscape 

EasyDocuments.in

© 2020 EasyDocuments. All Rights Reserved. Reproduction of multiple copies of materials on the site, in whole or in part, for the purposes of commercial distribution is prohibited . All content used on this site are owned by 3Dcorp. for use on this site only. Unauthorized use is prohibited. |AdChoices | Privacy Statement |Do Not Sell My Info Terms and Conditions Contact Us Report a Security Issue Jobs At EasyDocuments | Reprints & Permissions EasyDocuments Press Room Advertise


Secrete to online success

If you are interested in online business you can buy this book on amazon.com it will help me.


Comments