Cara Membuat Sidebar Widget Multi Tab Menu

JejakSeru.com - Kali ini saya akan membahas cara membuat sidebar widget multi tab menu pada sidebar blog. Widget multi tab berupa tabber yang berisi tiga widget, misalnya Popular Post, Label dan Latest Post yang sejajar dalam satu baris atau space.

Tabber ini berfungsi menghemat sidebar sehingga lebih efektif dan user friendly. Kali ini saya akan share multi tab yang sederhana, jika kamu ingin mempercantiknya tinggal kamu edit pada bagian CSS saja.

Kode ini saya ambil dari My Extra News Blogger Template dengan sedikit modifikasi.

Cara Membuat Sidebar Widget Multi Tab Menu di Blogger

Langkah 1 : Letakan kode di bawah tepat di atas kode ]]></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: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}

Langkah 2 : Letakan kode di bawah ini tepat 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-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>

Langkah 3 : Simpan dan lihat pada bagian Layout.

Pada bagian layout akan muncul tiga widget bertuliskan tab1, tab2, tab3. Jika belum muncul maka coba refresh atau tekan F5. Silahkan isi widget tersebut sesuai kebutuhan blog kamu.

Jika dirasa bermanfaat silahkan share/bagikan ke temen-temen terdekat kamu dan jangan lupa like fanspage facebook kami dan follow twitter kami agar selalu dapat informasi bermanfaat dari kami.

Berlangganan update artikel terbaru via email: