How To Add A Jump Link To Your Blog


By   McDonald, T.  | Updated 30th of June 2022

While surfing the internet, you may have noticed that some sites have an index that lets you jump to different parts of the same webpage and thought 'That is cool!'  Well, this is how you do it.  I have used blogger to demonstrate how it is done, but the process will be very similar for most blogs.

What is a jump link

A jump link is a link that lets the user jump to certain pats of the same webpage they are viewing.


How to add the code

You will need to add a simple piece of code. Make sure you add it just before the code you want it to jump to.  Note, the anchortext should have no spaces and anchortext can be anything you like.  For instance, you can replace anchortext with intro or con. The code is encapsulated in a span tag.  See below.

<span id="anchortext"></span> 

For example, if you want to jump to a header on the same page, you put the above code just before the <h1> tag in the HTML.

  1. Select the pencil icon in the menu bar at the top of blogger.
  2. Select HTML from the menu.
  3. Add the span tag with the anchortext.

Select  HTML view

You will likely see a lot of HTML, so use the find option to locate the code you want to insert the span tag before.

How to add the link

  1. Open the webpage you are working on in a different window or tab and copy the URL. Be sure it is in regular view mode. You can also get the URL from the permalink in the side menu if using blogger.
  2. Select the text you want as the link.
  3. Select the link option in the menu at the top.
  4. Paste the URL into the pop-up box and add a hashtag # to the end. Directly after the # add the anchortext. There should be no spaces. Generic formate URI#anchortext.
  5. Click apply and update.

Unfortunately, you can only test it once it is published.  Nevertheless, it does work.


 

 

Comments

Post a Comment

Popular posts from this blog

Random Images from API with python

How to get started with Python programming

Build A Test Website In 3 Easy Steps