Making a table of contents in a blogger blogpost

This won't interest any of my regular readers. I hope some people who will benefit from it will find it, but mostly I hope it will save me having to figure this out again every time I need it!

On some of my longer blog posts (such as my recent one on seeing the world) I like to include a table of contents to make it easier to navigate.  Unfortunately, blogger does not make this easy and, as someone with no background in computer programming, I found the online guides on how to do it hard to follow.  So, for other programming-novices out there, here's how to do it.

Write a table of contents

Do this however you like.  My table of contents for this blog post could look like this:

Write a table of contents
Turn entries into links
Define where the links will land
Correct the links

Turn each of the entries on that table of contents into a link

For this, you need to make a short name for each entry in your table.  For this one, I'd choose the words 'write', 'turn', 'define' and 'correct'.  For more complex tables such as the one in this post, actual words become awkward, so instead I number the headings and subheadings.  Heading 1, subheading 1 becomes 'h1s1', heading 2, subheading four 'h2s4' etc.

Now click the 'HTML' button in the top left of the editing window.  This has the text of your blog, along with all the formatting marks that control how it looks.  Find your table of contents within it.

For the second entry on my table, I'll put <a href="#turn"> immediately before it and </a> immediately after.  It will now look like this:

<a href="#turn">Turn entries into links</a>

If you now click the 'Compose' button in the top left of the editing window, you'll see the words 'Turn entries into links' are now blue and underlined: they are a link.


Define where the links will land

Return to the 'HTML' view of the editor.  You may notice that your previous work has been 'corrected' by blogger so that the table of contents entries now look something like this:

<a href="https://www.blogger.com/blogger.g?blogID=5683446064054569523#turn">Turn entries into links</a>

Ignore this for the moment.  Instead, scan down the document until you find the place you want the link in your table of contents to go to, e.g. the heading of that section of that document.

In my document, for the first section the heading is the words "Write a table of contents".  My name for that section was 'write'.  Immediately before the name of that section type <a name="foo"></a>, where 'foo' is the name of that section.  In my case, I'd put:

<a name="turn"></a>
Turn each of the entries on that table of contents into a link

Make sure you use the exact same short name in the table of contents and before the places they link to.

Now hit 'publish' on your blog.


Step 4: Correct the links

You will now have a published blog with a table of contents where the links go nowhere.  Unfortunately, there doesn't seem to be a way to prevent this, but it's easy to correct.

Make a note of the url of the published post, then return to editing it.  For every entry in the table of contents you will have an entry like:

<a href="https://www.blogger.com/blogger.g?blogID=5683446064054569523#turn">Turn entries into links</a>

In each case, replace that blogger url with the url of your published blog post, e.g.:

<a href="http://martinheather.blogspot.co.nz/2016/08/making-table-of-contents-in-blogger.html#turn">Turn entries into links</a>.

click 'update' and now your links should all work.