How To Add Jump Links In Blogger Like Wikipedia

Last Update March 24th, 2021

Today I am going to show you how to add jump links in Blogger like Wikipedia website.

Those anchor tags with numbers enclosed with a square brackets which are linked to the References at the bottom of the page.   

Then you can click back from the References section to the anchor tag with a square bracket which you have just clicked from. 

This function is useful and convenient for your readers to go to another section of the same blog post, particularly for those long blog post.

This tutorial is not just how to add a jump link to Blogger or how to create a link to jump to a specific part of a page.

Just like what they do for the table of content in the long blog post.

This tip is how to add a jump link to a certain part of the same blog post, and also where you can click back to where you come from.

Yes, it is just exactly like what you have seen them in all Wikipedia pages. 

They are indicated by a number in a square bracket.

When you click on it, it will instantly jump down to the References section located at bottom part of the same page.

To make it jump back to the article where you have originally clicked it, you just click on the little “^” symbol at the beginning of the footnote.

Before I share with you the tutorial, check out the jump link which I created here.

Click on the number [1] next to "Try me out" below to see how it works.

Try me out ^[1]

---

How To Add Jump Links In Blogger Like Wikipedia

STEP ONE: Locate Where To Put Jump Link With Number

1. After writing your blog post, click on the HTML view which is on the left hand side of the post editor.

2. Look for the part of your content where you want to add the jump link with a number in the square brackets. It is mixed together with the html tags.

I'm using my jump link example to explain:

3. Originally the HTML code looks like this:

Try me out [1]

4. After I have added some code, now it looks like this:

Try me out ^{<a href="#bottom">[1]</a>}

5. The code which you need to add is highlighted in yellow.

Note: The word "#bottom" can be replaced by any other word of your choice.

But they must match the same name when you do below.

The  tags is to make [1] smaller just like in Wikipedia site.

---

Step Two: Locate Where To Jump Link It To

1.  Now  look for the location of the blog post where you want the link to jump to.

2.  Again you need to add some code to it to make it work.

3. I am still using my example to explain:

4.  This is how the html code looks like before I add any code:

1.  Hello! This is how the jump link works. It instantly sends you down here at the bottom of the post.<br />To get back to the tutorial, just click on the tiny <b>“^”</b> symbol at the beginning of this footnote next to [1].

5. Now after adding the code, it should look like this:

1.<div id="bottom"><a href="#top">^</a></b> Hello! This is how the jump link works. It instantly sends you down here at the bottom of the post.<br />
To get back to the tutorial, just click on the tiny <b>“^”</b> symbol at the beginning of this footnote next to [1].</div>

6. The extra code which you need to add are highlighted in yellow. 

Note: I added another part "#top" to the ''^", so that when you click on it, it will jump back to the top of the page, exactly where you have clicked earlier.

I use “^” symbol in the code as a link anchor at the beginning of the content just like Wikipedia.

7. Click "SAVE" (diskette icon).

 Important: Before you add any code to get the jump link effect, you must click on the HTML view tab of your post editor and do your coding from there.

Once you have done the STEP ONE and STEP TWO, just click the "Update" button from there (HTML view).  

DO NOT switch back to "Compose view" to click on the "Update" button or do any changes to your blog post.

If you do that, then the jump link will NOT work.  

It is because it will change the two links <a href="#bottom"> and <a href="#top"> to different links, which look something like these respectively:

 <a href="https://www.blogger.com/blogger.g?blogID=7261208761530486070#bottom">

<a href="https://www.blogger.com/blogger.g?blogID=7261208761530486070#top">

If you need to make any changes to your blog post, then do it in the HTML mode. 

But if you do it on your Compose view, then after you have done, you need to switch it HTML view (by clicking on the HTML view), to make the changes to the links. 

In other words, you need to delete or remove away this part: https://www.blogger.com/blogger.g?blogID=7261208761530486070.       

 
 Note: The content below is for testing my jump links example.

---

1.^
It works! This is Try me out [1] which you have just clicked. 

 

So the jump link works. It instantly sends you down here at the bottom of the post. 

 

To get you back to the tutorial, just click on the tiny “^” symbol next to the number 1. of this footnote.

If you are still not sure, contact me at kertoon@yahoo.com

---

Note: All tutorials on Blogger template featured in this blog are for Simple template by Josh Peterson.