Expandable post summaries in Blogger beta

I thought I might take the opportunity, now I'm using Blogger beta, to write a few bits about hacking beta to make it do what you want it to do - as I discover how to do it myself...

I spent time today putting things back the way they were before I moved to Blogger beta. I'm not good with change! I liked it the way it was thankyouverymuch - but some of the new functionality in beta really appealed to me - so here I am.

The most important things I figured out today were how to re-customise my header (which I'll talk about tomorrow) and how to do expandable post summaries on beta. Those of you who figured out how to hack Blogger by using span class="fullpost" will know what I'm talking about. It's when you decide your blog posts are too long and the scrolling's too much and you'd like to show just a bit of each post on the main page (an intro or summary). The user then clicks on some kind of "See more", or "Read the rest"-type link to view the full post in a new browser window. Rather like this....

The old Blogger had it all sussed. There's a help page here that tells you all about how to do it. But that was the old Blogger. No solutions in the help pages for Blogger beta yet. So I surfed on over to the Blogger Help Group on The Google to see if I could find anything. I certainly wasn't the only person asking, and I found a few Q&As which sorta helped, but the ones I looked at didn't really have a complete solution.

I surfed over to a blog which was using one of the techniques and found a link in the comments to the very wonderful Hackosphere where I discovered a javascript solution which gives you Expandable posts with Peekaboo view. w00t! Totally brilliant.

You click on the "Read more..." (or in my case "Read the full post") link and the rest of the post appears on the main page, leaving everything around it still in place. Very ajax-y! Then when you've finished you can close it up again by clicking on the "Read the summary only" link which has appeared at the end of your blog post. Lovely!

Ramani has wonderfully clear instructions, and lots of other beta hacks to play with as well (it's his hobby), so I will simply send you over there because his hard work (and that of the rest of his team) certainly deserves a visit. Make sure that when you are following his instructions you have the "Expand Widget Templates" tickbox ticked, otherwise you won't be able to see the code he's referring to.

I've tested it in IE7, IE6, and IE5.5 on a PC and in Firefox, Safari, Opera and Netscape on my Mac. It works in everything. Awesome! Great work, guys!

Now... how about a calendar widget for the sidebar that identifies the days that you've blogged each month (and is clickable to load that day's postings)? I know you can do it...

Technorati tags: Blogger beta, hacks, widget, expandable post summaries, peekaboo, read more, web development, Hackosphere.