Real Preview for Blogger

Oh, so much fun! This is geeky!

I use Blogger, as you must be aware. I don't know if you use Blogger, but it does an adequate job and I don't have to think about how to manage comments or link history or anything, so I think I'm not ready to bother moving the site over to my domain and switch to something I manage yet.

However, there's one thing that's been bothering me, and a comment from the hacker chick made me realize others have the same trouble: Blogger's preview stinks.

Oh, I'm sure it's fine if you haven't done a lot of customizing, and it's easy to read through and see if you have any spelling mistakes. But if you've done any real customization of your template -- made special icons for your list dots or the like -- then the preview just doesn't cut it.

Imagine that you've gone and made a nice entry with a big blockquote in the middle and you want to review what you've done without publishing -- you don't want to take the chance someone might see it before you're ready, and publishing updates the RSS feed more quickly than you want. Your screen might look like this:

The Blogger Editor

You can click the preview link and Blogger will give you this:

Blogger's Preview

But I've mucked with my template so that all blockquotes have that silly looking blue quote bubble to the left -- not to mention that can't see what the colors will look like or the link. So the Blogger preview doesn't really let me preview. I want to know what it's really going to look like.

I mentioned earlier that I use Blogger. I also use FireFox, which happens to have a great extension called GreaseMonkey, which allows you to add your personal scripting to other people's pages -- only for your use, of course. So, I created a quick little user script (no warranties) just to see if it could be done.

That's where the yellow smiley on the edit page above came from.

If I click on the yellow smiley, the script reads my current blog page and replaces the content of the first post with the stuff I've typed into this edit box. And so now I can see what my post will look like in situ, without publishing first.

Better Preview for Blogger

Did I use that term correctly?

A couple of things that are not yet working:

  • The little label pictures that replace the tags after load are gone because this script strips the body onLoad="" function. Need to hang on to the actual body tag. (Actually need to change to adding it through window.attachEvent.)
  • The new page comes up and keeps spinning. I don't know why this is happening. If I use document.close() after writing the page, it goes and spins on a blank page.
  • Probably because of that last one, the preview tab/window won't reload. You have to close it and to do another preview.
  • I strip out the IFRAMEs. I don't know if this bothers me or not. It was easiest to strip these because there's a weird bit with the xml parser that turns empty divs and iframes into single units, which the browser doesn't like. (I.e, <div></div> becomes <div/>) I fix the DIVs, but strip the IFRAMEs.
  • No title. It's easy enough to replace the body because it's wrapped in a div with a classname of post-body. In my template, the title is wrapped in an H2 tag and a link. I don't know if all templates are like that, so I'm hesitant to figure out how to genericize it. Besides, the content format is what I'm interested in.
  • You have to use the HTML editor and set Blogger to let you control the markup -- that is, don't use the option where it inserts P tags for you. I don't know the algorithm Blogger uses to run through those conversions, so a my preview is meaningless in that case.

Now, if only I could edit directly on the page!

0 thoughtful messages from friendly readers: