page contents

How to Make the Yellow Bubble Things

Citing on the Blog

Hyperlinks are the recommended citations for the Blogging Project. But if you're someone who likes things a little neater and you don't mind playing with code, you can use the footnotes/asides option for the blog. You know, the thing that looks like this:

Process: Content

Footnotes on the site run on a script called Bigfoot.js. You can check out the full documentation by clicking on the link. If you've never worked with HTML before and would like a basic, in-person intro, come see me - I'll walk you through things.

To create your own pop-up footnotes/asides:

  1. You will need to write your post in code or markdown blocks. If you're pretty confident with HTML, the code will be fine. Markdown may be helpful if you want shortcuts for things like creating bold text or headings.
  2. Create a code/markdown box for your main text. This is where you will add the superscript footnotes that will become your pop-up notes.
  3. Add your text and any formatting you care to use. 
  4. Next to the word(s)/sentence where you want your first footnote, add the following code: <sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup>
  5. Do the same thing for your next footnote, but be sure to change the 1's to 2's. Like so: <sup id="fnref:2"><a href="#fn:2" rel="footnote">2</a></sup>
  6. Repeat for each place you want a footnote, increasing the numbers as you go.

Your content block, in the end, should look something like this: 

 On the left, you can see how the footnotes will look on the post before publication. On the right, the code/markup.

On the left, you can see how the footnotes will look on the post before publication. On the right, the code/markup.

Process: Footnote Text

Once you've entered the footnotes into code or markdown box for your content, you'll need to create the text of the footnotes, including any links or formatting.

1. Add a new code or markdown block below your content.

2. Insert the following code into the block:

<div class="footnotes"><ol>

    <li class="footnote" id="fn:1">Footnote 1<a href="#fnref:1" title="return to article"> ↩</a><br>

    <li class="footnote" id="fn:2">Footnote 2<a href="#fnref:2" title="return to article"> ↩</a><br>

    <li class="footnote" id="fn:3">Footnote 3<a href="#fnref:3" title="return to article"> ↩</a><br>




3. You can copy and past the <li class=...> piece as many times as you need to. Just be sure to change and increase the numbers (4, 5, 6...) for each.

4. If you want your footnotes to be blue when you're editing (see image below), you can add <span style="color:#3366ff; font-size:16px"> after the <ol>.

5. Replace "Footnote 1" with the text of your footnote. Do the same for Footnote 2, Footnote 3, etc.

6. Add formatting using HTML (bold = <strong>WORD</strong>) or markdown (bold = **WORD**).

7. Make sure you add links, like so: <a href="add html here">Wikipedia or whatever</a>.

Your code/markup should look like this: 

 Note the link in Footnote 2.

Note the link in Footnote 2.


Once you've saved your post, the preview should automatically run the script and show you the yellow ellipses marking your footnotes. If it does not, hit refresh and see if that works. If the ellipses still aren't showing once you've published the post, let me know and I'll help troubleshoot. :)


Heather Bennett

Professor, feminist, sci-fi geek. Historian interested in pedagogy, technology, gender/sexuality, archives, pop culture, medicine, intellectual history, world history.