Pages

Monday, February 6, 2012

11

Hack to expand/collapse Blogger sidebar gadgets

Previously I made the tabbed gadgets hack, which can save space in blog's sidebar. This hack serves the same purpose, but a bit differently. With this hack you can make your sidebar gadgets vertically collapsible, using jQuery. I have used it on this blog on some gadgets, and here is...


You can choose which gadgets you make collapsible, and make them either closed or open initially. You can also make gadget groups, from which only one gadget may be open at one time (in this blog the search gadgets, and in demo blog the profile gadget and "read more" gadget).

To install, you need to have some computing skills and know your way around. Edit your blog's template, and paste the following code before </head>. If you have jQuery already loaded somewhere in your template, you can leave out the first line.


Then you need to edit the window.load function at the end of the script. There you should add calls to cedgAddOpen or cedgAddClosed for all those gadgets that you want to make collapsible (and open or closed by default). Use gadget ID, preceded with #, or gadget title, as parameter. Using "#ID" is preferred method. You can easily see the IDs of the blog's gadgets at end of the template, when widget templates are not expanded.

To make a gadget group, pass several ID parameters to cedgAddOpen. The first ID's gadget will be opened initially, others closed. Example: cedgAddOpen("#Profile1", "#HTML1"); You can call cedgAddClosed again for the first gadget's ID if you want it initially closed, too.

Note: if you use also tabbed gadgets, you cannot collapse gadgets that are made into tabs.

As you can see in the CSS, the little plus and minus signs are implemented as base64 images. You can change them if you want, and they can be external images, too. Also other styles, and the gadget spacing, can be easily changed. You may also want to style the gadget titles (H2 element), I use a gradient there, here are instructions.
[Hide comments] - [Show comments]
Click on a single comment to hide/show its text

11 comments:

Pastaarj said... [reply]

Another THANKS for this great tips!

(I change my old tabyfying gadget for this new one @ www.reggaetubewatcher.com)

robbie said... [reply]

Brilliant!

I have one question. With the widgets all set to 'closed' initally, the widgets appear briefly before closing as the page loads. It there a way to avoid this, further speeding up page loading?

MS-potilas said... [reply]

@robbie
Good question. Fortunately it is possible to use CSS to initially hide the widgets' contents.

In my demo blog I added this style block before </head>:

<style type='text/css'>
#Profile1 .widget-content { display:none; }
#HTML1 .widget-content { display:none; }
#Followers1 .widget-content { display:none; }
</style>

I hide only the first three widgets, but I could have done all. Just use #widgetid .widget-content as CSS path.

Demo.

robbie said... [reply]

Thank you for your prompt reply!

So, all widgets closed would be:

<style type='text/css'>
#widgetid .widget-content { display:none; }
</style>

MS-potilas said... [reply]

@robbie
You have to list them all one by one, one line per widget id. In my example I have three lines for three widgets, if you have ten, then you need ten lines :)

robbie said... [reply]

@MS-potilas

That's what I did (include each #ID on a separate line), hoping you might have an alternative shortcut.

Kudos!

Isnan Nugrah Lastiko Tiko said... [reply]

thanks a lot , it's work to my blog :D

sdftyujklvbn.blogspot.com

Meiser said... [reply]

Hello.

This widget is great when you want to replace ALL the widgets with links in the sidebar.

But more often, we want to make it only for some widgets.

In this case, a simple code is available:

http://modifier-les-modeles-de-blogger.blogspot.be/2009/12/afficher-un-gadget-masque.html

A3Writer said... [reply]

Excellent gadget and tutorial. Just what I needed to spruce up my site. Thank you very much.

Post a Comment

Related Posts Plugin for WordPress, Blogger...
See the hack
for this dynamic
views icon: