Create Multi Sidebar tabs with jQuery Effects

as we know most blogs or website has a lot of widdget on sidebarnya, could reach 5 to 10 widgets on each website, for example a popular post, label, recent post etc.

Multi sidebar tab there are two kinds, namely by means of HTML and Edit without Edit HTML.

It:

      1. By default, the widget Edit HTML of bloggers like popular post, tag, archive, the original dll follower             had entered into the bloggers can multi tab sidebar, because it utilizes the original function of the                     addition of widgets in layouts» add gadgets.

     2. With no default widget, Edit HTML of bloggers as I mentioned above, it cannot be placed into the                multi sidebar tabs, because it can only add widgets from other bloggers like Fb-like box, twitter-box              etc, thus making the loading is a bit long.

And we are going to discuss here the multi sidebar tab with via the Edit HTML. The functions of the multi-language tab sidebar is to minimize the use of space on the sidebar widget looks so not too much. There are other ways to minimize the widget on your blog or website we can, by way of making the sidebar or sidebar accordion open lid. The script code and css multi sidebar tab I get from artificial Mkr-MyExtraNews template Site I've modified a bit.

Here's how to Setup:

1. Login to blogger account and requests each
2. place the following code below the code ]] > </b: skin >

<style> #sidebar-tab h2{display:none;} #select-tab{margin:0 auto 10px} #select-tab,#select-tab li{padding:0;margin:0;list-style:none;overflow:hidden} #select-tab li{float:left;width:33.3%;text-align:center}
#select-tab a{line-height:32px;display:block;background-color:#666;color:white;font-weight:bold;text-decoration:none} #select-tab .selected a,#select-tab a:hover{background-color:#860000} #sidebar-main .widget1{background-color:#f7f7f7;width:100%;float:left;padding:5px} #sidebar-main{overflow:hidden} </style>

3. then place the following code below the code < aside id = ' sidebar-wrapper ' > or < div id = ' sidebar-wrapper ' >

<div id='sidebar-tab'> <div id='tab'> <div class='tab-widget-menu clear'> <ul id='select-tab'> <li class='tab1'><a href='#tab1'>Popular Post</a></li> <li class='tab2'><a href='#tab2'>Comments</a></li> <li class='tab3'><a href='#tab3'>Archive</a></li> </ul> </div> <div id='sidebar-main'> <div class='widget1' id='tab1'> <b:section class='sidebar' id='tab1-popular-posts' showaddelement='yes'> </b:section> </div> <div class='widget1' id='tab2'> <b:section class='sidebar' id='tab2-comments-posts' showaddelement='yes'> </b:section> </div> <div class='widget1' id='tab3'> <b:section class='sidebar' id='tab4-srchive' showaddelement='yes'> </b:section> </div> </div> </div> <script type='text/javascript'> //<![CDATA[ $(function(){$("#select-tab li:first").addClass("selected");$("#sidebar-main > div").hide();$("#sidebar-main > div:first").show();$("#select-tab a").click(function(){$("#select-tab li").removeClass("selected");$(this).parent().addClass("selected");var a=$(this).attr("href");$("#sidebar-main > div:visible").hide();$(a).fadeToggle(1000);return false})}); //]]> </script> </div>

4. Please adjust yourself, you can change the writing Popular Post, Comment and Archive according to the widgets you want to add it later.

5. save the Template

Tweet