How to Add Sources, Citations and References in Blogger Posts

Add sources, citations and a references list to Blogger posts. Numbered notes that link back and forth, ready-to-paste HTML.

mu abdullah
mu abdullah in
min read
updated on:

    • Citing your sources makes a post more trustworthy, and pointing readers to good links keeps them learning after they finish reading. The theme has three ways to do this: a source line, a reference list with in-text citations, and further-reading cards.

    Paste every example on this page in the post editor's HTML view, not in Compose view. To show HTML as code in your own posts, run it through the HTML Escape Tool first.

    1. Source line

    Use it when the whole post is based on one source. It sits under the text with a small Source label.

    Lipsum generator, loremipsum.io

    <p class="source">Source name, <a href="source_url">site.com</a></p>

    To change the label, add data-title, for example data-title="Photo" or data-title="Via".

    The Blogger team blog, blogger.googleblog.com

    2. Reference list with citations

    Put a small number in your text wherever you use a source. Readers can hover over the number or tap it to read the source, click it to jump to the list at the end, and use the ↩ link to come back to the same spot.

    Blogger was launched by Pyra Labs in 19991 and bought by Google in 2003.2 Early blogging tools were built for writers who didn't know HTML1, and custom domains are still free today.You only pay the domain registrar.

    1. Rosenberg, S. (2009). Say Everything: How Blogging Began. Crown.
    2. Google Official Blog (2003). googleblog.blogspot.com

    Cite a source from the list

    Write the list with <ol class="reference">, then put <sup class="ref"> with the item's number where you use it. You can cite the same item as many times as you like.

    Blogger was launched in 1999<sup class="ref">1</sup> and bought by Google.<sup class="ref">2</sup>

<ol class="reference">
  <li>Author (Year). Title. Publisher.</li>
  <li>Author (Year). Title. <a href="url">site.com</a></li>
</ol>

    Write a note right in the text

    For a short note that isn't a source, write it in place inside <span class="fn">. The theme adds it to the end of the list and gives it the next number. If the post has no list, the theme creates one.

    custom domains are still free.<span class="fn">You only pay the domain registrar.</span>

    Put the <sup> or <span> right after the word, with no space before it, so the number sits tight against the word it explains.

    Change the list title with data-title, for example <ol class="reference" data-title="Sources">.

    3. Further reading

    Link cards for readers who want to go deeper. Just write the links: the theme adds each site's icon and domain name by itself.

    <ul class="reading">
  <li><a href="https://site.com/page">Page title</a></li>
  <li><a href="https://other.com/page">Page title</a></li>
</ul>

    The site icons are loaded from Google's favicon service. The title is Further reading by default, and you can change it with data-title.

    Quick reference

    You wantWrite
    One source<p class="source">
    Reference list<ol class="reference">
    Cite item 1 of the list<sup class="ref">1</sup>
    Note added to the list<span class="fn">note</span>
    Further reading<ul class="reading">
    Change a title or labeldata-title="…"