menu multikolom

Contoh tampilan dari Menu Multi Kolom atau Menu Multi Tab seperti gambar di bawah ini:


Gimana, apa kamu tertarik untuk membuatnya? Jika ya, mari kita lakukan experimen-nya Ikuti tutorialnya yah jangan saling mendahului, kalau mau mendahului lewat lajur kanan

• Login ke dashboard blog kamu.
  
• Pilih Rancangan »» Edit HTML
  
• Download template lengkap dulu untuk berjaga-jaga kalau terjadi kesalahan.
  
• tandai pada Expand widget template.
  
• 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;}

  
  Sesuaikan kode warnanya dg blog kamu, untuk melihat kode warna bisa di lihat pada postingan tentang Kode-kode warna HTML
  
• masukan script pemanggil berikut sebelum kode </head>
  

  <script src='http://blogtegal.googlecode.com/files/tabview.js' type='text/javascript'/>

• Terakhir klik SIMPAN

Kemudian langkah berikutnya yakni menambahkan widgetnya pada sidebar blog. Pada Rancangan element 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.