Written on June 22nd, 2006 at 01:06 pm by Darren Rowse
Add Sidenotes to your Blog
Here’s a cool little tool that enables you to put ’sidenotes’ on your blog using a mix of Javascript and CSS.
They describe them like this:
“It’s all about tangents. No, not those kinds of tangents. We’re talking about the kind where you’ll be sharing a thought and you sort of, umm, go off elsewhere. Some people call them asides, digressions, departures - you get the idea.
We are of the belief that footnotes - at least the ones worth reading - suck. They suck because they are elsewhere, usually far away from the line-of-sight we’re focused on when we read. It would be nice to be able to optionally just glance over and take that brief little detour if we so choose. It’s footnotes on steroids: sidenotes. ”
You can see them in action here.
I’m intrigued by the possibilities of sidenotes - as someone who regularly goes off in tangents they could well be something that adds a special something to my blogging.
I’ll give them a go in the next few days - what do you think about them?
Let us know if you try them out so we can see how you put them to use.
found via Lifehacker
22 Responses to “Add Sidenotes to your Blog”
Terry
June 22nd, 2006 5:23 pm
Hey, Thanks Darren. I was wondering just the other day where to find a tool for that. Looking forward to setting that up on the odd post here and there.
Terry
June 22nd, 2006 5:23 pm
Hey, Thanks Darren. I was wondering just the other day where to find a tool for that. Looking forward to setting that up on the odd post here and there.
Andy Merrett
June 22nd, 2006 5:26 pm
I can imagine they’d be useful if you were writing a tutorial and wanted to put in some sidenotes - in the same way that technical books will often have boxes with important information, tips, points to remember etc.
Not sure about the use of Javascript though. I’d probably just code floating DIVs into my article.
Mark McGuinness
June 22nd, 2006 5:29 pm
That looks very cool. Only problem is if someone is browsing with scripts turned off they won’t see the sidenotes - so I think I’ll avoid putting any “essential” tangents in sidenotes…
Marco Raaphorst
June 22nd, 2006 6:48 pm
Might be great and because of the javascript most rss-reader will suppress it. That’s great because without the styling it would be confusing in a rss-reader I guess.
Basic Thinking Blog » Unobtrusive Sidenotes
June 22nd, 2006 8:03 pm
[…] via ProBlogger […]
ruth
June 22nd, 2006 8:33 pm
hm, would be a cool place to put ads, eh?
http://earn-money-and-be-a-millionaire.blogspot.com
June 22nd, 2006 9:02 pm
the tool seems to be great but java script may be a bit problem in my site
Dave
June 22nd, 2006 9:21 pm
I came across this a while ago while looking for something else, and at the time I couldn’t envision using it personally, mainly due to the nature of my sites layout.
However, I can see it being useful, especially if you use a number of technical terms that your readers might want to have explained in more detail but you don’t want to write a separate page for.
One idea is if you are going to use these sidenotes, you could potentially pop an adsense advert into one of them, and if your visitors eyes are drawn to the sidenotes they will also notice the ad.
bonhamled
June 22nd, 2006 9:23 pm
Can it be used in blogger?
it would be a good chance for me.
It is half pace between link and explanation in the text.
shirazi
June 22nd, 2006 9:31 pm
Waiting for some one to do some how to!
graphic designer
June 22nd, 2006 9:41 pm
Darren, Its really cool and usefull specially when you have long posts having important text in mid of the post.
This can be christened as ” Out - Standing note “
Hsien Lei
June 22nd, 2006 9:55 pm
As a reader, I don’t really like sidenotes like these. Sidenotes really shouldn’t intrude on my reading experience or be necessary reading. Linking out should suffice, no? The Atlantic Monthly magazine experimented with these types of colored boxed-in sidenotes in print format a while back and I don’t believe it was very successful.
pcunix
June 22nd, 2006 10:36 pm
I used to use something like that (see http://aplawrence.com/Security/ssh.html for example). Those are just simple html tables like this:
Almost all of the “traditional” terminal emulation products
have added ssh support, so if you are used to and like one of them,
an upgrade will probably get you this capability.
I think it can be useful at times, but it’s easy to over use. I think twice before I do that now.
pcunix
June 22nd, 2006 10:39 pm
Ooops - I need to quote better:
<table width=”200″ bgcolor=”#CCEEFF” align=”right” border=”1″>
<tr>
<td>Almost all of the “traditional” terminal emulation products
have added ssh support, so if you are used to and like one of them,
an upgrade will probably get you this capability.</td>
</tr>
</table>
The New Marketing
June 22nd, 2006 11:37 pm
How important is being ranked 1 on Google?…
Darren Rowse over at ProBlogger links to a post about the difference between being 1st and 2nd on Google……
City SEO/M
June 23rd, 2006 3:26 am
Question: How clean is the javascript? I don’t want to offer sidenotes if my site loading time is going to jump by 2 seconds or more…
Better to keep the traffic and have them see the footnote. Besides, footnotes are placed at the bottomg since they aren’t integral to the issue, and can be ignored without much loss..
Oh, btw, Darren, you have comment spam immediately above.
Ruth made the most important point here in noting these could be used for ads.
John
June 23rd, 2006 11:01 am
Bonhamled,
For a how-to re: sidenotes on Blogger, see Freshblog
Lea
June 23rd, 2006 10:12 pm
I like the concept, it will work well for a lot of sites - but I think your layout is a little narrow to have items jutting into the content, Darren :(
Meant most politely!
Michael
June 24th, 2006 7:46 pm
Although I run a business site not a blog I have come across similar page concepts to the ’sidenote’ and have liked them quite a bit, am still working out the best way to implement them in some of my pages. Coding them in manually for me I guess will take longer but might have less script problems…
meyer-gellersen.com » Blog Archive » Daily Links
June 27th, 2006 11:24 am
[…] Add Sidenotes to your Blog […]
notetomyself » Blog Archive » links for 2006-06-27
June 28th, 2006 12:19 am
[…] Add Sidenotes to your Blog […]
Leave a Reply