Saturday, 9 February 2008

Unobtrusive Sidenotes

Have you ever been blogging happily away, only to suddenly, and much to your surprise, have the desire to write a footnote? But, who really likes footnotes, let alone actually going to the trouble of scrolling to the end of the text to read the footnote and losing your place? But, you have to admit, if there was a better way, you might become a footnote writing genius.

Well, I admit it, I'm one of those people. And today I found something exciting! It is called Unobtrusive Sidenotes. It is the perfect thing for when my thoughts wander and I'm off in left field, completely off base. Or, it can actually fill the shoes of a footnote by giving a more in depth explanation or reference to the topic at hand. It is the cutest little thing.

Unfortunately, the original code, in the above link, didn't work in Blogger and some other platforms. But, the people at arc90 corrected the problem with A Simpler, Hosted Version of Sidenotes.

The end result is simplicity at it's best. You see a block of pink text...look for the corresponding pink block. You see a block of blue text...look for the corresponding blue block. You get the idea.

To implement visit the links above and read more details about this script. I found I had problems with the code as they wrote it. So, I slightly revised it so it would behave with Blogger. I'll walk you through it. First this bit of code goes in the after the <head> but before the <b:skin><![CDATA[/*
<script language="JavaScript" type="Text/JavaScript" src="http://arc90.com/lab/tools/c/javascript/arc90hosted_sidenote.js"> </script>
The next code will be put into the post it's self. To make it easier, read Painless Blog Posting to set it up automatically in each post window.
<span class="sidenote" title="SIDENOTE TEXT THAT WILL BE DISPLAYED ALONG SIDE THE POST.">WORD/WORDS IN POST THAT RELATES TO SIDENOTE</span>
All in all, I think it could prove to be very useful.

Please take note, it is temperamental. I have it working in a test blog, but on BlogU it had conflicts with some of my other scripts. So, sadly, I removed it. And I was going to trash this post, but decided to share, because maybe it will work in your template. Just remember to backup your template before adding this, or any additions, to your template. Not to say I'm not still trying to make it work here, too!

post signature

No comments:

Post a Comment