Yahoo! had one of its internal hack days [1] today and while work kept me from devoting enough time to work on an effort on the scale of last time, an email at 9am this morning did give me the chance to show at least something at today’s show-n-tell.

I’ve been thinking of picture-in-picture badges for a while now and like the concept of a blog’s sidebar acting as a portal to your editorial view of the world. Match this navigational concept to the fact that badges are becoming more and more like the online equivalent of wearing a branded t-shirt and colleague Cody Simms thought was there’s an opportunity for a badge which showed a collection of websites you liked.

So when I got an email from FavoriteThingz (no longer in service) that they have opened up their service to allow you to create multiple badges of just about anything you could think of, neurons fired off on a way to update the tired-looking plain text blogroll.

Faces of people you read like those you see on MyBlogLog (which is totally rad for its own reasons) don’t really work in the context of a blogroll when it’s faces of people you don’t really know. Japanese salarymen have a saying that your business card is your “face” and in much the same way, your blog is “your face” on the internet.

It’s not really a hack (more like a “hand-cranked mashup”) but it’s a cool concept just dying for a little scripting. So here it is, in five easy steps:

1. Go to the webpage thumbnail creation service, webshotspro.com, and enter the URL of a blog on your blogroll into the form on the page.

2. Right click on the 400×300 pixel image and save the image file locally.

3. Go to favoritethingz.com (no longer in service) and create a new badge. Click “add thingz” and “add items manually” on the next page.

4. Select “custom” from the dropdown and enter the blog’s title, URL, and “browse” to select the image file you just saved. Click “save & add another”

5. Repeat.

There you have it! Generate the code for the badge and copy it into your sidebar or anywhere else on your page for a cool looking interactive widget which is way more interesting than a long list of text links. For an example, check out how it looks on my blogroll page. (Favoritethingz, the service that hosted this hack is no longer in service.)

[1] Thank you Leonard & Chris Plasser for organizing a bang up Hack Day. I think I’m safe in saying that my hack was by far the least technically spectacular of the bunch. I had to leave early but did get the watch a few of the demos via the live feed and have to say that the hacks (over 100 by my count) this time around were even more impressive than before. The theme seemed to be, “simple yet revolutionary” – it’s amazing what you can do with a few lines of code these days.