Even though there's no built-in way to create footnotes in Blogger, it's easy enough to code linked footnotes into a post in HTML view. Here's how I do it.
What it looks like for readers
When readers click on the footnote number, it jumps them down to the footnote. Clicking an arrow after the footnote conveniently jumps them back up to where they left off.
Footnotes are a great solution for tangential or additional text, such as caveats, resource citations, or pointless jokes. (I especially prefer the latter.) Readers can choose whether to continue reading the main text, or be delightfully distracted down to your bonus offerings, and then back up again when they're ready to resume.
The HTML code for you
You must enter this code in "Edit HTML" view in Blogger. (I have a tutorial explaining the difference between Edit HTML and Compose if you're not familiar with the two.)WARNING: NEVER switch back to Compose view once you've inserted the footnote code in Edit HTML!
Code to put in the text where you want the footnote's number to appear:
<a href="#1" name="top1"><sup>1</sup></a>
All right, which is easier for you? I pasted it above so you can see it easily, but here's the same code in a grab box for easier copying/pasting. Take your pick!
Code to place at the bottom of your post:
<hr width="80%">
<p>
<span class="Apple-style-span" style="font-size: x-small;">
<a name="1"><b>1 </b></a>FOOTNOTE<a href="#top1"><sup>↩</sup></a>
</span>
Obviously, replace "FOOTNOTE" with the actual footnote!
Explanation of the codes
These footnotes work through a simplistic process of "name" URLs that reference each other. You tag each part of the footnote with a name. The footnote number in the text is named "top1," and the footnote number at the bottom of the post is named "1."Then the paired URLs send readers back and forth between these "names" through the href codes. Telling the URL to go to href="#1" sends it to the post's URL but with #1 appended. That # sign tells the code to look for a name that matches what's after the #, and it finds it in our footnote named "1."
Multiple footnotes
If you want multiple footnotes, you simply need to paste the following parts of the codes again, substituting the numbers you need for the word "NUMBER."Code to put in the text where you want another footnote's number to appear:
<a href="#NUMBER" name="topNUMBER"><sup>NUMBER</sup></a>
That's three replacements at the top, if you're counting.
Code to place at the bottom of your post for multiple footnotes:
You want to add in this line after your first footnote line as many times as you need it.
<a name="NUMBER"><b>NUMBER </b></a>FOOTNOTE<a href="#topNUMBER"><sup>↩</sup></a>
Again, replace the three instances of "NUMBER" with the number you're on.
Here's a grab code for 5 footnotes:
Styling your footnotes
Obviously, you can feel free to alter these codes cosmetically to suit your blog. This is just what I came up with. The basic structure is the "name" links, and the rest is decoration.I used a "sup" command to make the footnote numbers superscript in the text, added an "hr" line at the bottom to separate the footnotes from the post's text, made the footnote font "x-small" in size, and used a little superscripted ↩ symbol for returning to the text location. Any of those elements could be changed as you wish. For instance, you could have your footnotes appear in a different font face or color, or change how you separate off your footnote area. If you want to copy mine as is, I don't mind, though I'd love any shout-outs to this post you'd care to give!
Tips
I keep these codes handy in a text file on my desktop, so I can easily copy and paste them into a post when I need a footnote.The biggest warning I can offer is NEVER switch back to Compose view once you've inserted the footnote code in Edit HTML. Sorry to semi-shout, but this will mess your code up, yo.
Here's, again, the tutorial on using Edit HTML vs. Compose. If you're comfortable crafting a post solely in Edit HTML view, then just do that, and you're golden. If you prefer Compose or like to switch between the two, you'll need to add your footnotes at the very end in HTML view, and then hit publish. If you need to get back into that same post to edit, you'll need to do so in HTML view again. Blogger has a usually helpful little thing where it "remembers" what view you used last time — if it was Compose, you might need to start (or edit) a new (different or throwaway) post in Edit HTML, and then open the one with the footnotes.
Also, these footnotes won't work on the main page of your blog, only on the specific post pages, unless you alter the URLs to have the post page URLs within the code (i.e., not just href="#1" but href="http://www.laurenwayne.com/2010/10/how-to-make-blog-button-grab-box.html#1" or whatever your specific URL is). This is because the generic href="#1" is looking for the "name" tags on the current page only. I figure most people are used to clicking over into a blog post for footnotes — I have to when I'm reading posts in a reader, for instance.
Occasionally, even if you're diligent about opening posts only in Edit HTML, Blogger will "helpfully" fill in a placeholder URL in front of your # commands when you reopen a post to edit it. In that case, either delete the nonsense URL Blogger has inserted, or replace it with the post's URL if you know it. That will keep the footnotes intact in the future.
Thoughts? Questions? What fanciness do you use for footnotes in Blogger?
1 This is my sample footnote. You can click the little arrow at the end of this footnote to get back to where you were.↩
subscribe to feed
follow on twitter
like on facebook
0 comments:
Post a Comment