Sidenotes on a blog

March 29, 2012 9:43 AM

Is there blog software that has a ready-made template that allows for sidenotes?

I like the look of some of Grantland.com's articles with sidenotes. Does anyone know if any of the major blog sites (Blogger, Wordpress) that have templates that allow for an HTML- and CSS-illiterate person like me to utilize sitenotes?

posted by glenngulia to Computers & Internet (7 answers total)

If you mean the part that says:

If Kentucky is simultaneously the most straightforward finishing school for future professionals and the best place to win a national championship, there's no reason for a blue-chip high school senior to go anywhere else.

...in HTML and blog-speak that is called a blockquote.

Most all themes allow blockquotes, and all blog platforms do, because it is a basic part of html. If you using Wordpress with the visual mode editor, you mark something as a blockquote with the button that has a big quote mark symbol on it.

I don't see anything else on the linked page from Grantland that I'd call a sidenote, so if you meant something else, you'll need to explain further.
posted by philipy at 9:58 AM on March 29, 2012

I may be wrong, but I think the sidenotes glenngulia is referring to are the numbered notes to the right of the article ("4. I'm not counting Ashley Judd.") I was curious myself as to how to set that up.
posted by El Sabor Asiatico at 10:05 AM on March 29, 2012

These two plugins for WordPress might do what you want.
posted by backwards guitar at 10:17 AM on March 29, 2012

Here's a discussion of how someone did it using Wordpress and the Pilcrow theme (and an example of same). It requires a little hand-coding in the post, and a little additional CSS, but nothing particularly daunting IMO.

This plugin for WP purports to create sidenotes or footnotes without markup. I haven't used it and can't speak to its quality.
posted by adamrice at 10:21 AM on March 29, 2012

Those would be called "footnotes".

There are plenty of ways to do footnotes, but it is unusual to see them in a sidebar rather than as part of an article, appearing underneath the main body of the article.

If you know to Google for things like "wordpress footnotes sidebar" you will find info that will help you do what you want.

But in my quick search, although I found ways to do it in Wordpress, e.g. this, I saw nothing that you can do without some knowledge of html at least.
posted by philipy at 10:25 AM on March 29, 2012

Btw, I notice that on Grantland, the sidenotes appear neatly aligned in the sidebar right alongside the references to them in the article.

That is advanced magic, probably using javascript.

It would take a long time to figure out how to do that, and I don't think there's anything that will do it out of the box for you.

However some of the footnotes plug-ins have some nice alternatives, like balloons that appear showing the sidenote when you click or hover over the reference.
posted by philipy at 10:43 AM on March 29, 2012

Looks like they are using this sort of thing This exact sort of thing.

function initFootnotes() {
    var $footnotes = $("#footnotes");
    if (window.innerWidth <>
        if ($footnotes.length > 0) {
            $footnotes.find("li").each(function () {
                $(this).css({
                    position: "static",
                    top: 0
                });
            });
            $("#footer").css({
                position: "static",
                top: 0
            });
        }
        $footnotes.css({
            display: "block",
            visibility: "visible"
        });
    } else {
        if ($footnotes.length > 0) {
            $footnotes.find("li").each(function () {
                var $this = $(this),
                    thisId = $this.attr("id"),
                    thisRef = "ref" + thisId,
                    thisOffset = $this[0].offsetTop,
                    $thisRefElement = $('[id^="' + thisRef + '"]:first'),
                    thisRefOffset = 0;
                if ($thisRefElement.length > 0) {
                    thisRefOffset = $thisRefElement[0].offsetTop;
                }
                var nextOffset = 0,
                    $previous = $this.prev();
                if ($previous.length > 0) {
                    nextOffset = $previous[0].offsetTop + $previous[0].offsetHeight;
                }
                if (thisRefOffset < nextOffset) {
                    thisRefOffset = nextOffset;
                }
                if (thisRefOffset > thisOffset) {
                    var newOffset = thisRefOffset - thisOffset;
                    $this.css({
                        position: "relative",
                        top: newOffset
                    });
                }
            });
            var $lastFootnote = $footnotes.find("li:last"),
                $footer = $("#espn-footer"),
                lastFootnoteOffset = $lastFootnote.offset().top + $lastFootnote.height(),
                footerOffset = $footer.offset().top;
            if (lastFootnoteOffset > footerOffset) {
                $footer.css({
                    position: "relative",
                    top: lastFootnoteOffset - footerOffset
                });
            }
            if ($footnotes.css("visibility") === "hidden" || $footnotes.css("display") === "none") {
                $footnotes.css({
                    display: "none",
                    visibility: "visible"
                }).fadeIn("slow");
            }
        }
    }
}
grantland.core.initFootnotes = initFootnotes;

posted by circular at 2:46 PM on March 29, 2012