Monday, November 20, 2006

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: , , , , , , , .

5 comments:

Ramani said...

I did get a request to come up with a calendar widget but thinking about it, I thought how many people would want to choose the post to read based on a date. So, I am not yet convinced about the usefulness.

webweaver said...

Hi ramani! Thanks for stopping by!

I initially saw the calendar on a Korean blog called naver - and I thought it was cute, rather than incredibly useful. But quite a few blogs seem to have it as an option. Here are a few I have just found:

ologist's blog2.0
Daniel's Blog (archive)
NaproLog

I think it might be quite a nice thing to have...

I'm Choonie. said...

I want a calendar widget in my blog too.

webweaver said...

hi there i'm choonie!

Thanks for dropping by! So glad to hear I'm not the only one who wants a calendar widget...

Anonymous said...

How to change the text for the "Read More" link?

And whats the "includable called 'post'" for Rounders!?

The widget: id='Blog1' locked='true' title='blog entries' type='Blog' ??