Cara Membuat Multi Tab Widget Sidebar di Menu Sidebar Blog

Biasanya standard widget yang di berikan blogger ketika di pasang di sidebar akan memanjang ke bawah, diantanya widget yang sering di pasang adalah : Popular Post, Recent Post dan Label.

Disini saya akan berikan cara mudah untuk menampilakan tiga widget terdebut menjadi satu tab menu dengan tiga fungsi widget berbeda, contoh hasilnya seperti berikut :

Cara yang dilakukan adalah :

1. Masuk menu Dashboar Blogger pilih > tema > edit HTML
2. Copycan Code CSS di bawah ini di atas ]]></b:skin>

#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:#48d}
#sidebar-main .widget1{background-color:#fff;width:100%;float:left;padding:5px 0}

#sidebar-main{overflow:hidden}

3. Langkah yang ketiga Masukan kode HTML di bawah ini di bawah Code Program : <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-tab'> <li class='tab1'><a href='#tab1'>Popular Posts</a></li>
<li class='tab2'><a href='#tab2'>Latest Posts</a></li>
<li class='tab3'><a href='#tab3'>Labels</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-latest-posts' showaddelement='yes'>
</b:section>
</div>
<div class='widget1' id='tab3'>
<b:section class='sidebar' id='tab3-labels' 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. Selanjutnya simpan tema,
5. kemudian buka tata letak > maka akan muncul 3 tab
6. Masukan tab yang pertama add widget > Popular post tab 2 add recent post dan yang ke 3 add labels
7. Selesai .

Selamat mencoba dan semoga bermanfaat, trimakasih.

Tweet