Facebook Pixel
Join our Facebook Community

Add Sidenotes to your Blog

Picture 1-11Here’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

About Darren Rowse
Darren Rowse is the founder and editor of ProBlogger Blog Tips and Digital Photography School. Learn more about him here and connect with him on Twitter, Facebook and LinkedIn.
Comments
  1. 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.

  2. 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.

  3. 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.

  4. Mark McGuinness says: 06/22/2006 at 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…

  5. 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.

  6. hm, would be a cool place to put ads, eh?

  7. the tool seems to be great but java script may be a bit problem in my site

  8. 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.

  9. 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.

  10. Waiting for some one to do some how to!

  11. 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 “

  12. 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.

  13. 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.

  14. 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>

  15. 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……

  16. 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.

  17. Bonhamled,

    For a how-to re: sidenotes on Blogger, see Freshblog

  18. 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!

  19. 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…

  20. […] Add Sidenotes to your Blog […]

A Practical Podcast… to Help You Build a Better Blog

The ProBlogger Podcast

A Practical Podcast…

Close
Open