Blogger Hacks, Categories, Tips & Tricks

Tuesday, May 30, 2006
Sidenotes and Text Boxes
Looks like the latest cool formatting tool to arrive on the scene is the offset text box, which lets you pull out a choice quote, format it for maximum impact, and offset it within your post to catch your readers' eye. I noticed this first a few weeks back with a how-to at Mandarin Design, You can see the hack or one just like it in action on Annie's Blogger University.

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:
  1. 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....
  2. Download the zip file from the ARC90 site, & save to your hard-drive.
  3. 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!)
  4. 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?
  5. 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
  6. Make a note of where you saved the file. You'll need to know in a sec.
  7. 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.
  8. 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"
  9. You kept a template backup, right? Good. Save your modified template and republish.
  10. 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.
  11. 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.
That ought to be it. As they say at arc90, you can even use HTML formatting within these spans. You just use single quotes not double quotes for links and such.

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!
Posted at 8:09 PM by John.
<    >
Blogger Singpolyma said...
People looking to host JavaScript files might be interested in

<    >
Blogger anniebluesky said...
I feel like I've made it big time! An actual mention on Freshblog!!! Thanks, John.

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


<    >
Blogger Aditya said...
Why use Javascript to do CSS's work? Thats overkill. I said the same thing over at Digg's story.

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.

<    >
Anonymous Anonymous said...
Seems like the JS is there to make it easier for people to use in their blogs (other than blogger that is, which seems to be a little complicated.)

Links to this post:

Create a Link

eXTReMe Tracker