Friday, April 3, 2009

Footnotes - How to Cite Sources In Blogs and Websites

When I created the Genealogy Source Citation Quick Reference for Geneabloggers, one topic I knew that I had to deal with was how to get footnotes to work in your blog or website.  Here are some tips and tricks on the best way to handle them in Blogger and WordPress.

WordPress

Of course, WordPress has several plugins available the best of which is FD Foonotes.

Blogger

For Blogger users - and those with WordPress blogs which don't allow the addition of plugins - you need to learn a little HTML code in order for footnotes to work properly.

Before you begin - and as I've said here at Bootcamp before - do not panic about having to learn HTML code!  Many readers have been able to leverage these simple codes to do wonderful things over at their blogs.

Simple Footnotes

I call these simple footnotes since clicking on the footnote reference does not "jump" down to the note itself.  This html code will simply place a superscript footnote reference in the text:



Complex Footnotes

Besides just placing a superscript footnote reference in the text, you need to make it "jump" down to the footnote text area. This requires a "target" - a target is the footnote text at the bottom of the post.  And you also need a pointer to that target which is what we'll embed in the footnote reference itself.1

1. With the footnote text already located at the bottom of the blog post, create a "name" marker which will serve as the target. Your text should be entered where it says "Footnote 1 text" below. Also note the name is "fn1" since each target must have a unique name, this refers to "footnote #1."



2. Now go up to the text where the footnote reference will appear. We will still use the superscript code listed above, but right before it we need a command to tell it to "jump" down to our target which is named - remember? - "fn1."



Tedious as this may seem it is the best way to set up footnotes that allow your readers to jump down to the footnote text.

This is the sample footnote text - it has a name "fn1" set as the target.

7 comments:

Concetta Phillipps said...

Thanks! That's good knowledge for anyone to have!

I've been pondering the use of hovering actions with footnotes as well (where if you put your mouse upon the reference, it would show in a small window that would go away when you move your mouse). I'm not sure it would be the most academic way to do it but thinking it might be good for readability, and include the classic footnotes later.

Thomas MacEntee said...

Interesting on the hovering concept - but would the text be picked up by search engines? My fear is that it wouldn't and I'd miss out on getting my surname info out on The Internets.

francella said...

I think it would be best to have both: the classic, reliable footnote at the bottom, and then you could have the hover-over info as a fancy, very nice-looking add on. I think those things are called 'mouse over event', at least in terms of Javascript. I'm not sure about other programming codes.

Kathryn said...

Thanks! I have been trying to do it on my wordpress blog without success. This will really help me!

Carole Riley said...

Thanks for the WordPress plugin, now I've got no excuse!

pastprologue said...

Thomas,
Just to clarify for readers, the Wordpress plug-in is only for those hosting Wordpress.org blogs. The Wordpress.com folks (like me) have to do it the html way "by hand" which you have explained so well.
Thanks,
Donna

Marie Reed said...

You've created such a valuable resource here Thomas! Bravo!