« Recent Posts and articles on Net Neutrality | Main | Picking up the Pace Next Week (with luck) »

John T. Unger

Blog SideNotes: A Cool Alternative for Footnotes from arc90

John T. Unger July 6, 2006

Sidenotes first came to my attention in a post on Problogger. They're a nifty little mix of CSS and Javascript that allow you to annotate your expanded thoughts in a little box off to the side of a blog post. Footnotes are a drag because they pull you out of the context by making you travel back and forth to the bottom of a page… one of the best things about reading online is that you can actually link to footnotes (and provide a return link) in order to minimize the hassle of navigating to the expanded information. Sidenotes improve over this by providing extended info as near as possible to the context. The box sets them off so that you know what they are, and you can choose to read them (or not) without breaking the flow of concentration. I really like the idea a lot.

But I didn't post about them right away because when I went and looked at the example page provided by arc90, I wasn't completely impressed with the implementation. Because they're styled with CSS you can easily change the appearance, but somehow, it just didn't really move me and shortly thereafter dropped off my radar. The original version required a bit of template modification to include the Javascript (it's possible you could just drop it in a Typelist, but I'm not sure. I didn't test it.) Then I got an email from Tom G, one of the regular readers here, alerting me to a new version of the script that's much easier to implement. He included a couple links to examples of posts where he had used it and I liked that much better. Thanks, Tom!

For some reason, the little sidenote I've included here isn't justified to the top of the paragraph it goes with, which sort of bugs me… but I'm not going to trouble-shoot it today. If you view source on this entry, you can see that CSS styles can be applied to individual sidenotes using the "edit HTML" tab in your compose window.

I'm also not sure how sidenotes display in RSS feeds. If you're reading this post via RSS, drop me a comment and let me know.

More Like This: Blog Tools , Hacks for Comments , Hacks for Layout + Design


Simon says:

Since you asked...

I was reading the post in my Bloglines and your sidenote was simply embedded in the middle of the associated paragraph in parantheses. I had no idea that it WAS a sidenote until I clicked through to the post.

Tom G says:

That is the one thing I don't like about Sidenotes [or maybe it's RSS for that matter?], it shows up in the middle of a post, rather than on the side. Like a good sidenote should. Anybody have any ideas? I've added a dashed line to my sidenotes as a border to make it show up better.

Mike Schinkel says:

Can a sidenote be pulled from the content of another blog post via javascript?

DrWeb says:

I was playing around with sidenotes, thanks for the tip on it. It seems to work okay hosted, and I added it in a Typelist link style in the Notes field.

Good luck on the no smoking.. tough road to crawl.


Russell James says:


Where exactly do we add that one line of code? On arc90 it says to put it in the portion of the template but where is that?


john t unger says:


You can add the javascript code in any of your typelists… it won't be visible in the typelist, but will be accessible to all the pages on your blog so that when you use the sidenote in a blog entry it will work. By and large, this is true for most javascript functions.

The comments to this entry are closed.


TrackBack URL for this entry:

Listed below are links to weblogs that reference Blog SideNotes: A Cool Alternative for Footnotes from arc90:

» Testing Sidenotes.. from DrWeb's Domain
Testing Sidenotes.. I'm trying out this hosted sidenote code, see more about it here from arc90's blog. Here is some ordinary paragraph text. Within this text, I can highlight a particular passage and add a side note to it like so. Well, it works, but ... [Read More]

typepad hacks is a typepad featured weblog typepad hacks is listed on Alltop social media


Email RSS Comments  
Subscribe to TypePad Hacks with email Read TypePad Hacks posts via RSS Join the conversation at TypePad Hacks via RSS (comments feed) subscriber count



Twitter Logo
    follow typepadhacks on twitter

    Read and reply to the 100 most recent comments at the TypePad Hacks Community Page



    Powered by TypePad
    Member since 03/2005

    TypePad Status

    Creative Commons License