An off-topic post: Footnotes in Blogger

This is an off-topic post, but it might be useful to someone. Like others (to judge from various blog posts) I have struggled with creating Wikipedia-style footnotes in Blogger. I want a click on the footnote reference in my text to take the reader to the footnote itself at the bottom of the page. And I want a click on the footnote number to take the reader back to the footnote reference in the text. Finally I seem to have got it right.

A word of caution: you do this by inserting code in the HTML of your post (remember the two tabs ‘Compose’ and ‘HTML’: you need to click on the HTML tab). But once you have done this, you mustn’t go back and save/update from the ‘Compose’ tab, otherwise it will mess up the code you’ve inserted. This is a flaw in Blogger.

Another word of caution: if you don’t understand basic HTML coding, don’t try this.

CSS code

Before I put Wikipedia-style footnotes in a post for the first time, I added a chunk of CSS code to Blogger’s internal CSS. You only need to do this once: it will apply to all posts and pages in your blog. To do it, enter the Blooger Dashboard, click on ‘Theme’, then on the ‘Customize’ button. Then in the menu at top left, click on ‘Advanced’. In the menu that appears immediately to its right click on ‘Add CSS’ and add the following code:[1] 

li.fn {list-style-type:none; color: #666666; font-size: 14px;}
a.anchor{
display: inline;
position: relative;
top: -90px;
visibility: hidden;
}
a.fn-anchor{
display: inline;
position: relative;
top: -90px;
visibility: hidden;
}

What does this code do? If you add Wikipedia-style footnotes without this code, there is a risk that when the reader clicks on either (a) or (b), the destination will be hidden under the Subscription banner above the post. Referring to this CSS code with a CLASS in the HTML code below prevents this. The top line (li.fn …) ensures that the footnotes are neither numbered automatically[2]  nor appear with a blob in front of them. The colour and font-size preferences are mine and can be changed to suit your taste.

Inserting HTML code

I write my posts, including footnotes, variously in Ulysses or Blogo, then transfer them to Blogger (or occasionally write them direct in Blogger). Once in Blogger I click on the HTML tab, locate the code for (a) footnote references in the text and (b) the footnotes themselves, and replace them with the code presented below. The footnotes themselves need to be in a list (either <ul>…</ul> or <ol>…</ol>).

If there are a lot of footnotes, I copy the whole post (in HTML) into BBEdit, replace the code for (a) and (b), then copy the whole post back to Blogger. Why? Because BBEdit uses colour coding for HTML, and I can more easily see the code to be replaced and check the replacements. Any text editor that colour-codes HTML will do for the job.

Now the code. I replace the code for (a), each footnote reference in my text with:

<sup>[<a href="#fn1">1</a>]</sup><a class="anchor" name="fn1-back">&nbsp;</a>

And I replace the code for (b), the number in front of each footnote with:

<li class="fn">[^<a href="#fn1-back">1</a>]<a class="fn-anchor" name="fn1">&nbsp;</a>&nbsp;

Notice that ‘1’ occurs three times in each code snippet. You will need to replace ‘1’ by ‘2’ three times in your second footnote reference and footnote, by ‘3’ in your third … etc. Also make sure that the straight quotes (") required by HTML are not accidentally replaced by 'smart' (slanted/curly) quotes.

Now some explanation of the code. Both code snippets have two link (<a…> … </a>) elements. In each snippet the first link takes the reader to a destination: either to the footnote or back to the footnote reference. The second, containing a class that refers to the CSS code above, ensures that the destination isn’t hidden by the subscription banner. I have tried combining the two links, but I can't. In the second snippet <li class="fn"> refers to the first line of the CSS code.

Both code snippets include square brackets that enclose the footnote number, e.g. [1]. The snippet for (a) also uses <sup>…</sup> to superscript the number. The snippet for inserts a caret into the footnote number, e.g. [^1] to tell the reader s/he can click on it to go back up.

You can edit out the superscription, the brackets and/or the caret if you don't want them.

Finally and annoyingly, you apparently can't test your footnotes in Preview. It seems you have to publish them (from within the HTML tab) before they will work.



Footnotes

  • [^1]   I copied most of this code from here, to whom I am heartily grateful.
  • [^2]   You could set things up so that the footnotes themselves are numbered automatically in an ordered list (<ol>…</ol>). I just prefer to control the numbering myself. If you use GREP in BBEdit you can do this quickly, but that’s another story.