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.
Post Comments (Atom)
Click on a single comment to hide/show its text
12 comments:
Another THANKS for this great tips!
(I change my old tabyfying gadget for this new one @ www.reggaetubewatcher.com)
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?
@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.
Thank you for your prompt reply!
So, all widgets closed would be:
<style type='text/css'>
#widgetid .widget-content { display:none; }
</style>
@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 :)
@MS-potilas
That's what I did (include each #ID on a separate line), hoping you might have an alternative shortcut.
Kudos!
thanks a lot , it's work to my blog :D
sdftyujklvbn.blogspot.com
how to put in post item content ?
@Isnan Nugrah Lastiko Tiko
This hack handles only gadget content.
Excellent gadget and tutorial. Just what I needed to spruce up my site. Thank you very much.
On this app you can find reverse phone number lookup. Check it. It really good app. Just read aout it.
most wonderfull Article, Thanks for sharing!
What Types of RTX 2070
See the hack to make the 'Post a Comment' link bigger.
Post a Comment