Multi Tab Sidebar Widget 02

SOURCE

letakkan didalam ]]></b:skin> atau </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:42px;display:block;background-color:#333;color:#fff;font-weight:bold;text-decoration:none}
#select-tab .selected a,#select-tab a:hover{background-color:#f44243}
#sidebar-main .widget1{background-color:#fafafa;width:100%;float:left;padding:5px 0}
#sidebar-main{overflow:hidden}

Contoh code HTMLnya kurang lebih seperti ini

<div id='sidebar-tab'>
    <div id='tab'>
        <div class='tab-widget-menu clear'>
            <ul id='select-tab'>
                <li class='tab1'><a href='#tab1'>Popular</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'>
                    <p>Isi konten widget tab 1
                        </br>
                        </br>
                        Bisa sobat isi dengan widget apa saja, misal widget popular post, label, arsip, dll.</br>
                        </br>
                        Donec at dolor mi. Pellentesque sit amet ornare risus. Fusce varius ut turpis sed semper. In ut est et enim gravida interdum nec id quam.</br>
                        </br> Aliquam leo ante, posuere id suscipit et, varius quis metus.</br>
                        </br>
                        Aenean tincidunt pellentesque facilisis. Aliquam leo ante, posuere id suscipit et, varius quis metus.</p>
                </b:section>
            </div>
            <div class='widget1' id='tab2'>
                <b:section class='sidebar' id='tab2-comments-posts' showaddelement='yes'>
                    <p>Isi konten widget tab 2
                        </br>
                        </br>
                        Bisa sobat isi dengan widget apa saja, misal widget popular post, label, arsip, dll.</br>
                        </br>
                        Donec at dolor mi. Pellentesque sit amet ornare risus. Fusce varius ut turpis sed semper. In ut est et enim gravida interdum nec id quam.</br>
                        </br> Aliquam leo ante, posuere id suscipit et, varius quis metus.</br>
                        </br>
                        Aenean tincidunt pellentesque facilisis. Aliquam leo ante, posuere id suscipit et, varius quis metus.</p>
                </b:section>
            </div>
            <div class='widget1' id='tab3'>
                <b:section class='sidebar' id='tab4-srchive' showaddelement='yes'>
                    <p>Isi konten widget tab 3
                        </br>
                        </br>
                        Bisa sobat isi dengan widget apa saja, misal widget popular post, label, arsip, dll.</br>
                        </br>
                        Donec at dolor mi. Pellentesque sit amet ornare risus. Fusce varius ut turpis sed semper. In ut est et enim gravida interdum nec id quam.</br>
                        </br> Aliquam leo ante, posuere id suscipit et, varius quis metus.</br>
                        </br>
                        Aenean tincidunt pellentesque facilisis. Aliquam leo ante, posuere id suscipit et, varius quis metus.</p>
                </b:section>
            </div>
        </div>
    </div>
</div>

Bentuk jadinya seperti ini, letakkan di bawah <aside id='sidebar-wrapper'> atau <div id='sidebar-wrapper'>

<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>

Selanjutnya tambahkan kode di bawah ini tepat di atas kode </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(1000), !1
    })
});
//]]>
</script>

D E M O