Creating Jump Links in Blogger

Crikey. You would think it would be a simple thing to work out how to create an anchor jump link on a single l-o-n-g Blogger page or blog post, so users could skip to the bit that was the most relevant to them. But no. It actually took me quite a while to find out how to do it.

I am not a techno-whizz at coding. I muddle through by trial and error, and always have a crack at coding in a Word document, where each change gets saved as a new version, so I can roll back when everything goes pear-shaped (as it often does. Version control rules!).

However, when I wanted to create some single page jump links, I thought it would be a relatively simple thing to do a google search and get an answer. However, I think I had five failed attempts before I finally found the 'right' way to get this working.

Luckily I was using Word so that I could roll back the changes I had made each time I tried and failed to get this working.

And, because it was so hard to get code that would actually work the way it was supposed to on a Blogger blog, I thought I would repeat it here for anyone else who was looking for the same thing.

So you need four things before you start:

1. Know where you want to locate your jump links (ie, your table of contents)
2. Choose a simple one word name for that particular jump link
3. Know where the headings are that you want to link to
4. Have working code for your heading.

What was proposed for the jump link itself was:

<a href="#Yellow">Light Yellow: Report/article FAQs</a>

What was proposed for the heading to be linked to was:

<a name="Yellow">Report/article FAQs</a>

What the jump link ended up looking like was (because it was a bullet point, and I wanted a particular phrase, and there was background highlighter, and there was a specified font):

<li><span quot="" sans-serif="" verdana=""><span style="background-color: #ffff99;"><a href="#Yellow"><a href="#Yellow">Light Yellow: Report/article FAQs</a></a></span></span></li>

And what the heading looked like (because a particular font, heading and background highlighter format) was:

<a name="Yellow"><span quot="" sans-serif="" verdana=""><span style="background-color: #ffff99;">Report/article FAQs</a></span></span></h3>

Hope that helps you work a solution out for yourself!


Sam

• Reference: Minaz ArtGirl (17 March 2017). HOW TO create anchor jump links within same page on BLOGGER successfully. Retrieved 29 April 2017 from https://productforums.google.com/forum/#!topic/blogger/TyLa_ajCtBA;context-place=topicsearchin/blogger/How$20do$20I$20create$20same$20page$20anchors$3F