Using Footnotes with Blogger

Anyone who has been following my advice in Using Microsoft Word with Blogger in order to generate footnotes/endnotes in your blog may be wondering why they don’t quite work. Well, it’s a Blogger fault but it’s also easy to fix.

If you’ve generated a footnote in Word then you may be looking at something like the following with superscripted numeric footnote indicators:

Here is a footnote reference: ⁴

…etc…

⁴ Here is the target footnote.

When you paste your article into the Blogger compose window, the first thing you’ll notice is that the superscripted numbers are now normal digits enclosed in brackets, but that’s an accepted alternative to superscripts. The second thing you’ll notice is that both the reference indicator and the target indicators have been made into hyperlinks:

Here is a footnote reference: [4]

…etc…

[4] Here is the target footnote.

The idea is that if you click on a reference indicator then it will take you directly to the target footnote. Also, if you click on the target indicator then it will take you directly back to the reference point. This sounds great as there’s no scrolling involved, but unfortunately it doesn’t work out-of-the-box.

Don’t be too scared but we’re going to have a peek at the HTML code that Blogger will have generated.

<a href="https://www.blogger.com/blogger.g?blogID=3869192014258511310#_ftn4" name="_ftnref4" …>

<a href="https://www.blogger.com/blogger.g?blogID=3869192014258511310#_ftnref4" name="_ftn4" …>

There’s one of these <a> elements generated for both the reference and target points. The ‘name’ attribute simply gives each point a label, and the ‘href’ attribute makes a hyperlink to go a named label. All they’re doing is creating mutually referencing hyperlinks. The reference point is labelled ‘_ftnref<n>’ and the target is labelled ‘_ftn<n>’.

The reason these don’t work is that the URL that Blogger has inserted is referencing the design-time compose window — remember that when you pasted your article into Blogger, it hadn’t yet been published, and so it didn’t have a proper URL. The sad thing is that it shouldn’t have put any URL in there at all. What the HTML should have looked like is the following:

<a href=" #_ftn4" name="_ftnref4" …>

<a href=" #_ftnref4" name="_ftn4" …>

This is much simpler, right? All I’ve done is to remove the explicit URL before the hash (‘#’) character. That hash part is technically called a Fragment Identifier, and that’s the only important bit when creating an intra-page link.

<a href="https://www.blogger.com/blogger.g?blogID=3869192014258511310#_ftn4" name="_ftnref4" …>

The part I removed (shown in red) will be fixed for all posts on your own blog as the number is just a global ID for your blog. There’s no real difference between footnotes and endnotes for a Web page, including single-page blogs, so I now use endnotes since it retains some consistency between my Word edition and my blog edition. The only difference you’ll see in the HTML is that the labels are then ‘_ednref<n>’ and  ‘_edn<n>’, respectively.

The Solution

After pasting your Word article into the Blogger compose window, switch to the HTML window and search for either “#_edn” or “#_ftn”, as appropriate. Delete the part preceding the hash (but not the hash itself) on each match. Then save or publish as per normal. If you have a lot of footnotes/endnotes (I have 30+ in some of my own posts) then you can copy the complete HTML to your favourite text editor (e.g, Notepad), do a global replace to remove all those URLs with the blogID on, and then copy the complete result back to the Blogger HTML window (making sure you replace all the old content). Using familiar short-cut keys such as Ctrl-A (select all), Ctrl-C (copy) or Ctrl-X (cut), and Ctrl-V (paste) then this doesn’t take too long at all.

If you try out some of my own blog posts then you’ll see how it should work. In fact, if you’d like to visit every single post then I would be dead chuffed[1].

---

[1] Dead chuffed, and similar variants, are part of British slang. Roughly translated, it means 'exceedingly pleased'. However, there are no whoops and hollers with it; it is usually delivered in a subdued, almost dead-pan, tone that's particularly associated with Yorkshire. In March 2012, President Barack Obama welcomed British Prime Minister David Cameron to the White House by saying he was "chuffed to bits", and this still makes me smile.