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.

Blogger
Disqus
Pilih Sistem Komentar Yang Kamu Suka

10 comments

Oh jadi gitu caranya. Izin coba gan

Balas

mantap gan ijin coba

Balas

Wih ane terapin dlu, smoga berhasil

Balas

iya silahkan di coba gan

Balas

silahkan dicoba gan, klo ada masalah comment aja

Balas

oke gan, jika ada masalah silahkan comment aja

Balas

Mkasih untuk tutor nya kang..hehee

Balas

Iya mas, maaf saya mbak bukan kang :D

Balas

ok mas sama-sama

Balas