Sidebar gadgets may be an important part of your blog. There are literally hundreds of different gadgets you could have in your blog. But the size is kind of limited, if you have too many, users might not scroll pages after pages to see what gadgets there are. I have had one hack in mind, that would collapse/expand single gadgets, when user clicks on the gadget title, to save space so user finds the gadgets easier. I started playing around with this idea, hiding and showing the gadget divs... And then I realized...
If I have say four subsequent gadgets, and I hide three of them and show only one at a time, it is like showing one page of four gadget pages. And a good UI component for selecting one of several pages is "tabs". So my idea of one hack turned into another: tabbed sidebar gadgets (I still might do the collapsing gadgets some day, too).
See how much vertical space is saved! A couple of these tabifying gadgets, and your new sidebar could be just a fraction of the old sidebar. You can see a working demo in my other blog, MS-potilas (blog is in Finnish). Later when I have time I will install these tabbed gadgets on this blog, too.
(Dec 4th 2011: installed on YABTB.)
The tabifier script
There are some configurable variables in the beginning of the script. But first, if you use more than one set of tabs in your blog, for the second gadget, you must do a search and replace, and replace all instances of "tabnav0" by "tabnav1" (and "tabnav2" in third tab set, etc) in the script.
Configure the number of gadgets you want to tabify. By default the tab titles are taken from gadget titles, which are then hidden by the script. Short titles are preferred, so the tabs don't span on several lines, which does not look good, works though. If you want, you can specify the tab titles in the array tabnav#_tabtitles, so you don't have to shorten the titles of the actual gadgets.
You can also style the tabs using CSS. Every tabset has different IDs and so can have different styles. I've added some simple grey gradients to the tabs, which I made using my gradient png data URI maker, but the tabs look ok without gradients, too.
My tabbed gadgets can be nested. But if nested, the gadget that contains another tab set must always be the last tab of the "upper" tabbed gadged. And also increase the two z-index values by one in CSS of the inner tabifier script(s), so they are rendered better. I suggest you to not use nested tabs, because the user interface might get confusing to the blog reader.
Another tabify gadgets implementation, using jQuery
I googled for other tabbed gadgets' implementations, and found one at Blogger Sentral: The easiest tabbed content widget for Blogger, demo here, which looks very good. It uses jQuery to draw the tabs and is quite different from mine. You might want to check out that one, too, and decide whether use that script or mine. There is also much other interesting stuff @ Blogger Sentral.
New info January 30th 2012: Gadgets with iframe and Internet Explorer 9
This hack hides "hidden tabs" (gadgets) using CSS display:none. In Internet Explorer 9 for some reason, if gadget has an iframe, it won't be shown. You can specify your blog to use Internet Explorer 8 document mode, if you have iframe-containing gadgets you want to tabify. I.e. in the <head> section, there should be line:
<meta content='IE=EmulateIE8' http-equiv='X-UA-Compatible'/>
Or don't tabify iframe containing gadgets. If you do, make sure you test it with Internet Explorer. This might be related to this feature, but my script is not altering the DOM, only visibility, so I'm not sure. If you have some clue why it does not show in IE9 document mode, please let me know.
A small visual update, May 6th 2013:: Fade in effect for tabs, see the hack.