In many cases you may find that the content in your sidebar widgets is so much that it is causing a very long sidebar to mess up your Main Page. Then you can use Drop-Down, Expandable +/- Boxes to house your widget contents.
These boxes have a Title and a +/- sign next to it. When you click on the + the box expands to reveal it's contents. Have a look at the bottom of the last column on this blog just above the contact widget. The Labels widget has been added in unexpanded state : See picture below :
The arrow points to the +/- sign to expand and contract the widget box.
To create it login to Blogger and click on Layout link n Dashboard. Before you begin backup the template. Then click on Edit Html sub tab of Template tab. Check the box to Expand widgets Templates. Scroll down to your widgets code. Each widget code when expanded looks like this :
<b:widget id='Label2' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
WIDGET CODE
</b:includable>
</b:widget>
Ignore the first two and the last two lines. Use Edit ----->Cut to remove the middle 'WIDGET CODE' lines to memory. Then open the Flooble Expandable box generator page.
Use Edit----Paste to paste the WIDGET CODE in the text box 'Box Content' at the bottom of the page. Fill in the Box Title and the colors and click on 'Get Code' button to generate code. Copy and paste the Javascript code at the top of your template after the <head> tag. Similarly copy and paste the code in Step 2 instead of the WIDGET CODE in the widget. Save Template.
WELCOME!
This blog contains quick tips for Bloggers. For detailed explanations do visit the main blog at :
Drop Down, Expandable Boxes For Widgets.
Search Blog Before Commenting
Loading...
Post a Comment
Please use the above Search box to look for solutions before posting your valuable comments.
Comments posted on Tips for Bloggers are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,
YATOC - Yet Another Table of Contents.
Table Of Contents
12 comments:
Could you say a little bit more about pasting it at the header? I can understand how it's replacing the guts of the widget code, but I'm not sure exactly where (or what the new code will be doing) when I put it in the header. Thanks! Edith OSB from http://edithosb.blogspot.com
Edith,
It is used to reduce the height of the sidebar. Not used in header. I will be outlining drop down menus in header in a future post.
Thanks for another great hack recommendation. The only problem I had trying to install this is that blogger keeps saying that the div is not properly closed with an end tag. I just could not find the error?? It is in the Step codes cos I did it step by step and preview each.
Herbert Wong,
What is the exact error message?
Also see :
Error Messages in Blogger.
I can't seem to get it to work for my template; I don't know what code to copy into exactly.
I'm using the Scribe template--would that have anything to do with it?
Mattheous,
It works on all templates. Just follow the steps and report if you have any error messages.
Am I the only one who does not have any thing called label in my html template??
I have beta blogger.
Ren.kat,
What is your blog address?
Vin:
can you tell me wheter it is possible to move the sidebar from right to left on a ROUNDERS template? I coudn't find a way to do this without changing the template. Any tip will me welcome... ;)
Thanks for your blog
Alberto
P.S.: I'm making a blog with some easy tips for bloggers in portuguese for my fellow friends. Is it allowed to translate some of your tips (changing the text a little)? I'm not sure, so I must know before I start with my blogger.
Roberto,
It can be done. In the template change this code :
#sidebar-wrap {
width:240px;
float:$endSide;
....
}
TO :
#sidebar-wrap {
width:240px;
float:$startSide;
....
}
and save template. Just change the float lines. Full code not shown above. Then in <body> part of the template the code for the sidebar should come before the code for the main wrapper.
In your posts please include the link to the original post. Thank You.
I was able to get the expandable box on my blog, but now it won't expand. When I click the + sign it doesn't do anything at all. Does anyone know what I did wrong? Thanks
Thirty-Fiver,
In your expanded widgets template code try changing this code in Labels widget :
<span dir='ltr'>(<data:label.count/>)</span>
TO THIS CODE :
(<data:label.count/>)
CLICK HERE TO LEAVE A COMMENT.
Skip to top of post.