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
18 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
Hey, nice blog! Thanks for sharing such valuable insights. This was a wonderful read, and I truly appreciate the effort you put into it. Your post was very helpful for me, and I’m looking forward to more updates. Keep up the great work and keep blogging!
Android apps development company in noida
Hey, nice blog! Thanks for sharing this valuable information. Your post is really insightful and helpful for me. I appreciate the effort you put into creating such useful content. Looking forward to reading more of your posts. Keep up the great work and keep blogging!
Dentist For Kids in Timonium
Hey, great blog! I really enjoyed reading your post. It's informative and helpful, especially for someone like me. Looking forward to more valuable content from you. Keep up the great work!
Warehousing Services in India
Hey, great blog! I really enjoyed reading your post. The insights you shared were very helpful and informative. Looking forward to more valuable content from you. Keep up the great work and keep blogging!
Amazon Product Photography
Hey, nice blog! Thanks for sharing such valuable insights. Your post was really informative and helpful for me. I appreciate the effort you put into creating quality content. Looking forward to more amazing posts from you. Keep up the great work and keep blogging!
Customized office products
Hey, nice blog! Thanks for sharing such valuable insights. Your post was really helpful and informative. I appreciate the effort you put into creating this content. Looking forward to more amazing posts from you. Keep up the great work and keep blogging!
Freelance mobile app developer
See the hack to make the 'Post a Comment' link bigger.
Post a Comment