 |
| Sidebar Multi Tab |
Membuat Sidebar Multi Tab dengan Efek jQuery Di Blog - Mungkin dalam suatu
Kesempatan anda pernah menemukan keganjalan , yaitu melihat widget dengan multi
tab , atau bisa juga disebut Sidebar Multi Tab , sibedar ini langsung tergabung Di tata letak
Dan Untuk Menambahkannya cukup tambah Widget Pada Tata Letak
Berikut Langkah-Langkah nya :
1. Cari Kode ]]></b:skin>
2. Letakan Kode Dibawah Ini Diatas ]]></b:skin>
#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}
3. Cari Kode <aside id='sidebar-wrapper'> atau <div id='sidebar-wrapper'>
4. Letakan Kode Dibawah Kode Tersebut :
<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>
5. Silahkan anda sesuaikan sendiri, anda bisa mengganti tulisan Popular Post, Comment dan Archive sesuai dengan widget yang ingin anda tambahkan nanti.
6. Simpan Template
Untuk menambahkan widget kedalamnya caranya seperti biasa, anda tinggal masuk pada menu Tata Letak » Tambah Gadget.
Posts
