Tips & Tricks: Footnotes

This page is still under construction!

If you want to add footnotes to your blog you will need to edit the html of the blog.  Here is a short tutorial on how to do that (click on the images to enlarge them).

Edit blog html 1When you are editing your blog the editing window looks like the screen shot to the left. This is known as a wysiwyg editor.  The editor shows you just about what the blog will look like once it is posted and viewed in a browser.  The editor does not show you all the coding (html) that lies behind your blog.  However, up in the top left corner of the editor there is a button that will allow you to switch to html (source) view.  This is where you will need to go to insert footnotes.

The next screenshot shows what the source view looks like.Edit blog html 2 You will notice that there are now extra characters showing up within the text.  Each paragraph begins and closes with a paragraph tag which looks like this:


In the source text, each reference to a footnote1 has a piece of html code that links it to the footnote. Then the note itself (with it’s own html code) is placed at the end of the article (via the source view screen).  The numbered reference has a dynamic link to the footnote and vise-versa.

This is what the reference above looks like:Edit blog html 3 The highlighted text is the paragraph in which I have placed the footnote reference. Notice that it sits inside the text – ie. the text wraps around it.

Footnote References: In your source code text, where ever you want a reference to a foot note you will need to add one line of this code.  There are 9 lines – enough for 9 footnote references. So just copy and paste one of these lines where you need it.

<a href="#ftn1" id="ref1"><strong><sup>1</sup></strong></a>
<a href="#ftn2" id="ref2"><strong><sup>2</sup></strong></a>
<a href="#ftn3" id="ref3"><strong><sup>3</sup></strong></a>
<a href="#ftn4" id="ref4"><strong><sup>4</sup></strong></a>
<a href="#ftn5" id="ref5"><strong><sup>5</sup></strong></a>
<a href="#ftn6" id="ref6"><strong><sup>6</sup></strong></a>
<a href="#ftn7" id="ref7"><strong><sup>7</sup></strong></a>
<a href="#ftn8" id="ref8"><strong><sup>8</sup></strong></a>
<a href="#ftn9" id="ref9"><strong><sup>9</sup></strong></a>

Footnotes: At the very bottom of the page insert the following html code.  There are enough lines here for 10 notes.  Delete any lines that you do not need.  Replace the words NOTE_HERE with the text of your footnote.

<ul id="footnotes">____________________
<li><a href="#ref1" id="ftn1"><sup>1</sup></a>NOTE_HERE</li>
<li><a href="#ref2" id="ftn2"><sup>2</sup></a>NOTE_HERE</li>
<li><a href="#ref3" id="ftn3"><sup>3</sup></a>NOTE_HERE</li>
<li><a href="#ref4" id="ftn4"><sup>4</sup></a>NOTE_HERE</li>
<li><a href="#ref5" id="ftn5"><sup>5</sup></a>NOTE_HERE</li>
<li><a href="#ref6" id="ftn6"><sup>6</sup></a>NOTE_HERE</li>
<li><a href="#ref7" id="ftn7"><sup>7</sup></a>NOTE_HERE</li>
<li><a href="#ref8" id="ftn8"><sup>8</sup></a>NOTE_HERE</li>
<li><a href="#ref9" id="ftn9"><sup>9</sup></a>NOTE_HERE</li>


  • 1This is where the footnote goes…

Leave a Reply

Your email address will not be published. Required fields are marked *