Well, Al points out a similar hack, by the ARC90 lab, this one designed to put footnotes in the text boxes instead of choice selections of prose. Very cool, & you can, of course, include any text that you want to, whether footnote or not. Some barriers to getting this to work on blogger, most notably the fact that this hack requires you to host the script, but this how-to ought to get it going, Blogspot style:
- Backup your Blogger template. Copy it & save it as a text file, e-mail it to yourself, whatever. Just please keep a copy that you haven't messed with....
- Download the zip file from the ARC90 site, & save to your hard-drive.
- Extract the contents of the folder, and view the files. There's a webpage, a javascript, and a jpg of a duck... yup, a duck... quack! (This hack's for you, Julie!)
- Check out the index.htm file for a demo of the hack (So that's why there's a picture of a duck in there....) Pretty good, isn't it?
- Go back to the script file. Upload that file to some free web space somewhere. As Stephen points out in the comments, you might like to try his jscripts.ning.com
- Make a note of where you saved the file. You'll need to know in a sec.
- Back to the example webpage. View the source of the webpage, and note the CSS in the head of the template. Copy and paste everything from the opening script tag to the closing style tag into the head of your template.
- Edit the opening line that you pasted (that begins with a script tag) so that the SRC link in that line of code points to the file that you just hosted, like this: src="http://mywebspace/myfolder/arc90_sidenote.js"
- You kept a template backup, right? Good. Save your modified template and republish.
- Write a post, and wrap the text that you want to highlight in span tags with the class "sidenote" and a title attribute. The title text will become the text that appears in the offset sidenote box. To streamline the process of inserting these tags, you might consider saving the code in the Blogger post template, so that it will appear automatically each time you write a post.
- If you want to, you can modify the new CSS in your template head to change the colors, sizes or float positions of the text boxes.
As the frosting on the cupcake, at least potentially, there's a very nice show/hide option for sidenotes on the online demo page that doesn't seem to be in the original packet. Is that feature available & I'm just not seeing it? That would be very cool!
Filed in: blogtech, blogger-hacks
I wish I could take credit for the pullquotes, but I got the idea from Mandarin Design. You can go to my blog and this post will give how-to: Visual interest - Pullquotes
http://bloggeruniversity.blogspot.com/2006/04/visual-interest-pullquotes.html
peace...
annie
Good idea, but the implementation could be improved. I've got something like that on my personal blog (a link is there in the backlinks), which is pure CSS.