How to Install the Multi Tab Widget on the Sidebar

How to Install the Multi Tab Widget in the Sidebar - This time I will share a multi tab widget that will save the widget in the sidebar of the blog with a lightweight jQuery effect and SEO Friendly.

This multi tab with jQuery serves to store the widgets that you normally store in the blog sidebar on the layout. There are several reasons why you want to install this multi tab, one of which is to make the widget neater and save space on the blog, especially in the sidebar. Okay, straightforward, here's how to apply it:

How to Install the Multi Tab Widget on the Sidebar

1. Login to Blogger> Click Template> Edit HTML> Add the code below just above the code]]> </ b: skin> or </ style>

/* Multi Tab Sidebar */
#sidebar-tab h2{display:none}#select-ted{margin:0 auto 10px}#select-ted,#select-ted li{padding:0;margin:0;list-style:none;overflow:hidden}#select-ted li{float:left;width:33.3%;text-align:center}#select-ted a{line-height:42px;display:block;background-color:#333;color:#fff;font-weight:bold;text-decoration:none}#select-ted .selectab a,#select-ted a:hover{background-color:#f44243}#sidebar-main .widget1{background-color:#fafafa;width:100%;float:left;padding:5px 0}#sidebar-main{overflow:hidden}

2. Then add the following code just below the code <aside id = 'sidebar-wrapper'> or <div id = 'sidebar-wrapper'> (If it's not there, find the sidebar section according to your template)

<div id='sidebar-tab'>
  <div id='tab'>
    <div class='tab-widget-menu clear'>
      <ul id='select-ted'>
        <li class='tabs1'><a href='#tab1'>Popular</a></li>
        <li class='tabs2'><a href='#tab2'>Comments</a></li>
        <li class='tabs3'><a href='#tab3'>Archive</a></li>
      </ul>
    </div>
    <div id='sidebar-main'>
      <div class='widget1' id='tabs1'>
        <b:section class='sidebar' id='tab1-popular-posts' showaddelement='yes'/>
      </div>
      <div class='widget1' id='tabs2'>
        <b:section class='sidebar' id='tab2-comments-posts' showaddelement='yes'/>
      </div>
      <div class='widget1' id='tabs3'>
        <b:section class='sidebar' id='tab4-srchive' showaddelement='yes'/>
      </div>
    </div>
  </div>
  </div> 

3. Then add the code below just above the code </body>

<script type='text/javascript'>
//<![CDATA[
$(function(){$("#select-ted li:first").addClass("selectab"),$("#sidebar-main > div").hide(),$("#sidebar-main > div:first").show(),$("#select-ted a").click(function(){$("#select-ted li").removeClass("selectab"),$(this).parent().addClass("selectab");var e=$(this).attr("href");return $("#sidebar-main > div:visible").hide(),$(e).fadeToggle(1e3),!1})});
//]]>
</script>

4. Finally save the template and see the results.

Now on your blog has a multi tab widget installed, to see it please check the blogger dashboard> Layout> There is already a column to add a widget.

That's the tutorial on How to Install the Multi Tab Widget on Sidebar, hopefully useful.