Fancy Footnotes for the Fearless

Back in February, I implored you to stop using unlinked footnotes in your blog posts. The intrepid Stephen Heard [1] of Scientist Sees Squirrel fame, not the 18th century governor of Georgia pointed out that that linking is a little kludgy. The return anchor can only be at the beginning of a paragraph, so it’s not an exact jump. And in my browser, my WordPress banner overhangs the link, so I don’t actually see the line I’m jumping to. Yes, a little kludgy. But so much better than no link.

Then Stephen wondered whether it would be possible to do pop-up footnotes, like in Randall Monroe’s [2] of XKCD fame, not the former NASA roboticist “What If?” series. When you click these links, a little box pops up and displays the footnoted text. It’s slick and has a more modern feel. It doesn’t require any scrolling and is less kludgy than linked footnotes. So I looked into it, and the answer is yes! [3] Well, the answer is yes! if you host your own blog. If you’re using a free blog hosted on wordpress.COM, you’re out of luck. You get what you pay for, I guess. Sorry, Stephen.

It’s not even that hard. You have to manually add a couple pieces of code to your blog website, but doing so is a one-time deed and takes less than five minutes. Then you simply add a little HTML around your footnotes and voila! Stunning pop-up footnotes.

Here’s how on WordPress:

1. In your WordPress control panel, go to “Appearance” and then “Editor.” You can now manually edit your blog pages. Careful here.
2. The first file to edit is your style sheet. It will be called “style.css”. Somewhere in it (at the end is fine), add the following code [4] stolen borrowed from Randall’s “What If?” site:

   .ref {
   position: relative;
   vertical-align: baseline;
   }
   
   .refnum {
   position: relative;
   left: 2px;
   bottom: 1ex;
   font-family: Verdana, sans-serif;
   color: #005994;
   font-size: .7em;
   font-weight: bold;
   text-decoration: underline;
   cursor: pointer;
   }
   
   .refbody {
   font-family: Verdana, sans-serif;
   font-size: .7em;
   line-height: 1.1;
   display: block;
   min-width: 20em;
   position: absolute;
   left: 25px;
   bottom: 5px ;
   border: 1px solid;
   padding: 5px;
   background-color: #fff;
   word-wrap: break-word;
   z-index: 9999;
   overflow: auto;
   }

3. You can play with the values in here to customize the look to your liking. Save your edits.
4. Then you want to edit your header template. It will be called “header.php”. In the header part of the file (right before the </head> tag is good), you want to paste in the following code:

   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
   </script>
   <script>
   jQuery.noConflict();
   jQuery(function() {
   jQuery(".refbody").hide();
   jQuery(".refnum").click(function(event) {
   jQuery(this.nextSibling).toggle();
   event.stopPropagation();
   });
   jQuery("body").click(function(event) {
   jQuery(".refbody").hide();
   });
   });
   </script>
   

5. Save those edits.
6. Now you’re ready to write a post with a pop-up footnote. To do so, type the link you want (such as “[5]”) and the text you want to pop up.
7. Switch to “Text” mode from “Visual” mode. There’s a little tab to do this in the upper right, when you’re composing a new post.
8. Before the link, add these tags: <span class="ref"><span class="refnum">
9. Between the link and the text you want to pop up, add these tags: </span><span class="refbody">
10. And after the text you want to pop up, add these tags: </span></span>
11. So, for example, my HTML for this [5] One, two, five! footnote reads <span class="ref"><span class="refnum">[5]</span><span class="refbody"> One, two, five!</span></span>

That should do it. If you blog on a non-WordPress platform and you have edit access to your blog’s files, the steps should be virtually the same. You’ll need to add CSS code to your stylesheet and the javascript function to whatever template your blog pages are derived from. The HTML tags will be the same.

And now, your readers will be delighted by their ease of reading and you will be the footnote envy of all of blogdom. [6] Until someone tells you your page looks crappy on their browser or device. Or blog posts look crazy when they arrive as email. Or… well, go ahead and tell me. That’s what the comments are for.