Blog SideNotes: A Cool Alternative for Footnotes from arc90

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.

Comments

[Posted: Jul 6, 2006 2:35:37 PM]

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.

[Posted: Jul 6, 2006 9:21:35 PM]

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.

[Posted: Jul 7, 2006 1:12:27 PM]

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

[Posted: Jul 8, 2006 1:10:16 PM]

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.
http://drweb.typepad.com/dwdomain/2006/07/testing_sidenot.html

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

Best,
DrWeb

[Posted: Jul 10, 2006 5:29:43 PM]

Hi,

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?

Cheers
Russell.

[Posted: Jul 10, 2006 7:22:37 PM]

Russell,

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.