Tabbed your Crowded Widget / Gadjet

Since there are too many widgets that interest you, the side bar of your blog will expand to a long scroll down. You must be worried sometimes, stumble upon a beautiful / stylo gadget but there is no place to put it. Don't worries, because this widget can group them into one simple tab and easy to install, no need to copy and paste it again into a complicated html script. Sample of this widget view here

So why using this tab widget / tab content box:

• Accommodates unlimited number of widgets.
• Keeps the tabbed widgets’ original appearance.
• Fully widgetized for ease of installation and removal. If you don’t like what it does, simply remove the HTML/Javascript gadget.

Installation

• Go to Layout and click an Add A Gadget.
• Select HTML/Javascript widget.
• Leave the title box blank.
• Copy the green code below and paste it inside the content box.

If you have a problem to install html/java script it in blogspot, please click [here]

Copy / paste this code into your site

<!---StartCopyTabWidget--->
<style type="text/css">
.tabber {
 padding: 0px !important;
 border: 0 solid #bbb !important;
}
.tabber h2 {
 float: left;
 margin: 0 1px 0 0;
 font-size: 12px;
 padding: 3px 5px;
 border: 1px solid #bbb;
 margin-bottom: -1px; /*--Pull tab down 1px--*/
 overflow: hidden;
 position: relative;
 background: #e0e0e0;
 cursor:pointer;
}
html .tabber h2.active {
 background: #fff;
 border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
 border: 1px solid #bbb;
 padding: 10px;
 background: #fff;
 clear:both;
 margin:0;
}
.codewidget, #codeholder {
 display:none;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('#codeholder').bloggerTabber ({
  tabCount : 3
 });
});
</script>

<!-- to make sure the widget works, do not alter the code below -->
<div id='codeholder'>
<p>
<a href="http://www.bloggersentral.com" ></a><a href="http://j.gs/1gvu" target="_blank">TabbedWidget</a></p>
</div>
<!---EndCopyTabWidget--->

**Note (find the text and edit)

• Specify the value tabCount : 3  .This value equals the number of widgets (underneath the tabber widget) that you want to turn into tabs. change number 2 means the 2 tab below it will be group together.
• The default box background color is white (#fff). Apply the same color for the active tab’s background and bottom border (below it).
• This widget must remain unnamed (picture below) and all the tab you want to put inside this widget MUST have a name.