How To Add Jump Links In Blogger Like Wikipedia


Last Update December 5th, 2016

Today I am going to show you how to add jump link to another location on the same blog post, particularly for those long blog post.

I am sure you have seen them in all Wikipedia pages. They are indicated by a number in a square bracket.

how to add wikipedia-style jump links in blogger
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 Create Jump Links In Blogger Blog Post


Step One:

Locate Where To Put Jump Link With Number


1. After writing your blog post, click on the HTML tab above the text editor (the box where you do your writing).

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 <sup><a href="#bottom">[1]</a></sup>

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 Step Two below.

The <sup></sup> tags is to make [1] smaller just like in Wikipedia site.

Step Two:

Locate Where To Jump Link It To


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

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

8. I am still using my example to explain:

9.  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].

10. 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>


11. The extra code which you need to add is 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.

12. Click the Save template button.


 Important: Before you add any code to get the jump link effect, you must click on the HTML 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.  

DO NOT switch back to "Compose" tab 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 mode, then after you have done, you need to switch it HTML mode (by clicking on the HTML tab), 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.^
Hello! This is Try me out [1]. So the jump link works. It instantly sends you down here at the bottom of the post. To get back to the tutorial, just click on the tiny “^” symbol at the beginning 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.


Written by: Kher Cheng Guan