Cara Membuat Menu Multi Kolom / Multi Tab

Cara membuat Menu multi kolom pada blog meski sudah banyak ditulis para blogger tak ada salahnya saya akan menulisnya kembali untuk sobat yang sedang newbie semua.

Menu Multi kolom ini banyak sekali fungsinya, yang terutama menu multi kolom ini yaitu untuk mengepres widget dalam satu menu kotak.

Atau menggabungkan beberapa widget kedalam satu kolom widget. Biasanya menu ini diisi dengan daftar isi link, recent coment, atau bisa diisi yang lainnya.

Contoh tampilan Menu multi kolom atau multi Tab lihat di bawah ini;

Kita lanjutkan cara membuatnya, ikuti terus langkah - langkahnya berikut :

1. Login ke Dashboard blog

2. Pilh rancangan >> Edit HTML

3. Download template lengkap dulu untuk berjaga-jaga kalau terjadi kesalahan.

4. Tandai pada  Expand widget template.  

5. Kemudian  tempatkan script berikut sebelum kode ]]></b:skin>

div.TabView div.Tabs { height:24px; overflow:hidden;}
div.TabView div.Tabs a { float:left; display:block; width:90px; text-align:center; height:24px; padding-top:3px; vertical-align:middle; border:1px solid #ddd; border-bottom-width:0; text-decoration:none; font-family:verdana,arial,sans-serif; font-weight:bold; color:#000;}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color:#fff;}
div.TabView div.Pages {clear:both; border:1px solid #ddd; overflow:hidden; background-color:#fff;}
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden;}
div.TabView div.Pages div.Page div.Pad {padding:3px 5px;}

     Sesuikan kode warnanya sesuai dengan blog anda

6. Kemudian masukkan script pemanggil berikut sebelum kode </head>

<script type='text/javascript'> function tabview_aux(TabViewId, id) { var TabView = document.getElementById(TabViewId); // ----- Tabs ----- var Tabs = TabView.firstChild; while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling; var Tab = Tabs.firstChild; var i = 0; do { if (Tab.tagName == "A") { i++; Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");"; Tab.className = (i == id) ? "Active" : ""; Tab.blur(); } } while (Tab = Tab.nextSibling); // ----- Pages ----- var Pages = TabView.firstChild; while (Pages.className != 'Pages') Pages = Pages.nextSibling; var Page = Pages.firstChild; var i = 0; do { if (Page.className == 'Page') { i++; if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px"; Page.style.overflow = "auto"; Page.style.display = (i == id) ? 'block' : 'none'; } } while (Page = Page.nextSibling); } // ----- Functions ------------------------------------------------------------- function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); } function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); } </script>

7. Terakhir klik Simpan.

Langkah selanjutnya yaitu menambahkan widgetnya pada sidebar blog. Pada rancangan elemen

klik " Tambah Gadget " dan pilih widget " HTML/Javascript "

Dan masukan kode berikut kedalamnya: 

<form action="tabview.html" method="get">
<div class="TabView" id="TabView"> <div class="Tabs" style="width:350px;">
<a>Sub judul 1 </a> <a>Sub judul 2 </a> <a>Sub judul 3 </a></div> 
<div class="Pages" style="width:350px; height:260px;">
<div class="Page"> <div class="Pad"> Link 1 di menu 1 Link 2 di menu 1 Link 3 di menu 1 </div> </div> 
<div class="Page"> <div class="Pad"> Link 1 di menu 2 Link 2 di menu 2 Link 3 di menu 2 </div> </div>
<div class="Page"> <div class="Pad"> Link 1 di menu 3 Link 2 di menu 3 Link 3 di menu 3 </div> </div> </div> </div> </form> <script type="text/javascript"> tabview_initialize ('TabView'); </script>

Terakhir Klik Simpan.

Selesai dech, selamat untuk membuat Menu Multi Kolom.