Cara Memasang Widget Multi Tab di Blog

Dengan cara memasang widget multi tab di blog, blog sobat akan terasa lebih simpel dilihat. Widget multi tab adalah widget yang memiliki 3 tab, jika tab 1 di klik maka muncul konten tab 1 dan seterusnya sampai tab 3. Widget multi tab ini diposisikan pada elemen sidebar dan dengan cara ini otomatis kita akan menambahkan langsung widget-widget yang ingin ditampilkan pada multi tab di tata letak atau page element blog. Dengan widget multi tab ini akan menghemat penempatan pada widget sidebar blog sobat.

Cara Memasang Widget Multi Tab di Blog

Tambahkan kode dibawah ini diatas kode ]]></b:skin> atau diatas kode </style>

/* Widget Multi Tab */
.multitab-section{background:#fff;text-transform:uppercase;width:100%}
.multitab-widget{list-style:none;margin:0 0 10px;padding:0}
.multitab-widget li{list-style:none;padding:0;margin:0;float:left}
.multitab-widget li a{background:#3cc091;color:#fff;display:block;padding:10px;font-size:13px;text-decoration:none}
.multitab-tab{border:0;width:33.3%;text-align:center}
.multitab-section h2,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6{display:none}
.multitab-widget li a.multitab-widget-current{background:#358c6d}

Tambahkan juga kode javascript dibawah ini diatas kode </body>

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

Kemudian cari kode <div id='sidebar-wrapper'> atau <aside id='sidebar-wrapper'>
Tambahkan kode html dibawah ini dibawahnya kode tadi

<div class='multitab-section'>
<ul class='multitab-widget multitab-widget-content-tabs-id'>
<li class='multitab-tab'><a href='#multicolumn-widget-id1'>Popular</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id2'>Tags</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id3'>Archive</a></li>
</ul>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'/>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'/>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'/>
</div>
</div>

Ubah nama yang dimarking dengan nama tab yang ingin sobat tampilkan.
Simpan template.

Untuk memasang konten widget multi tab di blog nya, buka halaman Tata Letak/Pageelement pada blog sobat, kemudian tambahkan gadget/widget pada kolom sidebartab1, sidebartab2 dan sidebartab3 lalu simpan widget.

Tutorial Blogger, Widget