Widget in Tab Menu Wordpress Style

Kabar hangat dari mybloggertricks, blogger satu ini mengeluarkan trik bagaimana cara membuat Wordpress Tab Menu Style Widget. Blog yg membikin emotikon versi skype untuk komentar di blogspot itu loh ;;) Keunikan dari tab karya @mybloggertricks ini yaitu, tab ini akan menghasilkan dimana nanti kita ketika melakukan Add a Gadget sudah ada didalam tab tersebut :-/ Mengirit tempat, full stylish, dan tentu gaya punya b-) Untuk mengambil bahan-bahannya silahkan sobat baca disana saja My Blogger Tricks. Hal yg perlu diperhatikan oleh sobat² sekalian jika ingin menggunakan trick ini yaitu:

1. Backup full your template.
2. Terintegrasi dengan jQuery Plugin.
3. Mulai misinya...wekekekekkk.

Pada template carilah kode <div id='sidebar-wrapper'> dan catat/ingat jenis widget apa saja yg sobat add disana. Ini penting dilakukan karena nantinya pasti kita akan melakukan perpindahan isi widget (jika perlu juga sih) :P Contohnya seperti ini:<b:widget id='LinkList1' locked='false' title='Your Title I' type='LinkList'/><b:widget id='HTML2' locked='false' title='Your Title II' type='HTML'/><b:widget id='Profile1' locked='false' title='Your Title III' type='Profile'/>Perhatikan tulisan kode yg dibedakan warnanya itu, nah itu yg harus sobat catat dan dingat-ingat ;)

Kode CSS

/*--- Wordpress Style MBT Menu Tabs ---*/
.MBT-tabs {
list-style:none;
list-style-type:none;
margin:0 0 10px 0;
padding:0;
height:26px
}
.MBT-tabs li {
list-style:none;
list-style-type:none;
margin:0 0 0 4px;
padding:0;
float: left
}
.MBT-tabs li:first-child {
margin:0
}
.MBT-tabs li a {
color:#fff;
background:#333333;
padding:5px 5px;
display:block;
text-decoration:none;
font:bold 12px Arial,Helvetica,Sans-serif;
}
.MBT-tabs li a:hover,.MBT-tabs li a.MBT-tabs-current {
background:#A46F38;
color:#fff;
text-decoration:none
}
.MBT-tabs-content {
background:#212121
}
.MBT-tabviewsection {
margin-top:10px;
margin-bottom:10px;
}

KOde HTML dan jQuery script

Letakan persis dibawah kode
<div id='sidebar-wrapper'>
Jika tidak menemukannya mungkin dikarenakan perbedaaan ID, yg penting tag div pada sidebar template sobat dah :D

<div class='MBT-tabviewsection'>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function($){
$(".MBT-tabs-content-widget-MBT-id").hide();
$("ul.MBT-tabs-widget-MBT-id li:first a").addClass("MBT-tabs-current").show();
$(".MBT-tabs-content-widget-MBT-id:first").show();
$("ul.MBT-tabs-widget-MBT-id li a").click(function() {
$("ul.MBT-tabs-widget-MBT-id li a").removeClass("MBT-tabs-current a");
$(this).addClass("MBT-tabs-current");
$(".MBT-tabs-content-widget-MBT-id").hide();
var activeTab = $(this).attr("href");
$(activeTab).fadeIn();
return false;
});
});
//]]>
</script>

<ul class='MBT-tabs MBT-tabs-widget-MBT-id'>
<li><a href='#widget-MBT-id1'>Subscribe</a></li>
<li><a href='#widget-MBT-id2'>Latest Tricks</a></li>
<li><a href='#widget-MBT-id3'>Search</a></li>
</ul>

<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id1'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
</b:section>
</div>
<div style='clear:both;'/>

<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id2'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>
<div style='clear:both;'/>

<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id3'>
<b:section class='sidebar' id='sidebar3' preferred='yes'>
</b:section>
</div>
</div>
<div style='clear:both;'/>

Save

Setelah itu tengok deh ke bagian Page Elements template, dan lihatlah disana sudah terpasang Add a Gadget terintegrasi dengan tab yg tadi dibuat. Isikanlah dengan widget sobat yg tadi Beben si bloglang anu ganteng kalem tea suruh simpan/ingat :)
Wiss ah permios,demo bisa dilihat di dummies blog Beben atau temennya Master Mohammad Mustafa Ahmedzai ;)