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:

Step 1: HTML Code for Content

The yellow bubbles 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.

    • Do note, you will need to re-do your bolded, italicized, and linked text if you're switching from a Text block to a Markdown block
  1. 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.
  2. Add your text and any formatting you care to use.
  3. 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>
 
  1. 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>
 
  1. 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.

Step 2: HTML for the Text to Appear in the Bubbles 

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>
    </li>
  </ol>
</div>
 
  1. You can copy and past the "
  2. " piece as many times as you need to. Just be sure to change and increase the numbers (4, 5, 6...) for each.
  3. If you want your footnotes to be blue when you're editing (see image below), you can copy and paste the following code:
 
<div class="footnotes">
  <ol>
    <span style="color:#3366ff; font-size:16px">
    <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>
    </li>
    </span>
  </ol>
</div>
 
  1. Add formatting using HTML (bold = WORD) or markdown (bold = WORD).

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

When all is said and done, your code or 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.