Close
Close

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, Google+ and LinkedIn.

Problogger.net runs on the Genesis Framework

Genesis Framework

The Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple - start using Genesis now!

Comments

  1. Terry says:

    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. Terry says:

    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. Andy Merrett says:

    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:

    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. ruth says:

    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. Dave says:

    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. bonhamled says:

    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. shirazi says:

    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. Hsien Lei says:

    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. pcunix says:

    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. pcunix says:

    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. City SEO/M says:

    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.

  16. John says:

    Bonhamled,

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

  17. Lea says:

    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!

  18. Michael says:

    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…

Trackbacks

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