“Tabbify” Your Blogger Widgets

Any good web designer would know it is unwise to cram a web page with too much stuff like banners, ads, animated images, and widgets. It has the potential to slow down the site or the page’s loading time (especially with plugins), and can overwhelm the viewer with too much data. Today’s featured widget tutorial will help minimize the latter.
This tutorial from Roy of Blogger e-How will teach you how to make a multi-tabbed widget for your Blogger blog. By merging a specified number of your widgets into one, you get to maximize the usage of your blog’s precious screen real estate.
As Roy points out, what makes this better than other methods of creating a tabbed widget is that you don’t have to modify your blog’s template code, thereby eliminating the chances of messing up your site’s layout. This method will automatically transform your existing widgets into tabs! You can see his demo.
Here are the instructions on how to install it to your blog:

1. Go to ‘Design’ page in your Blogger dashboard
2. Go to ‘Layout’ and click on ‘Add a Gadget’
3. Select ‘HTML/JavaScript‘
4. Copy/paste the code below in the content box (you can leave the title box blank)

<style type="text/css">
.tabber {
 padding: 0px !important;
 border: 0 solid #bbb;
}
.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;
 -moz-border-radius:5px 5px 0 0;
 border-radius:5px 5px 0 0;
}
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>Get this <a href="http://bloggerehow.blo

Some important things to note:

• Red color line is for loading jQuery library. Remove this line if you’ve already loaded it somewhere else in your blog. Hint: If your blog has a slider, cycler or something with fading effect running, chances are it is powered by jQuery.
• Specify the number of widgets that you want to turn into tabs in Green color line.
• The default box background color is white (#fff). You can change it in Pink color line. Apply the same color for the active tab’s background and bottom border.

5. Position this gadget you just created above the gadgets that you want to get tabbed.
6. Save your widget and you done!
Final Notes:

• Make sure that each widget you want to get tabbed has a title. Otherwise this won’t work properly.
• Use short widget titles so that all tabs will fit in the row.
• You may need to reduce the widths of the tabbed widgets to make them fit.
• Don’t forget to test in Internet Explorer. This widget may cause the “Operation aborted” error in IE for some non-designer templates. If that’s the case, this widget is not for you.