Saturday

menu multikolom

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

cara membuat menu multi kolom, membuat kolom multi tab

Gimana, apa kamu tertarik untuk membuatnya? Jika ya, mari kita lakukan experimen-nya cara membuat menu multi kolom, membuat kolom multi tabIkuti tutorialnya yah jangan saling mendahului, kalau mau mendahului lewat lajur kanan cara membuat menu multi kolom, membuat kolom multi tab

  • 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.

Artikel Terkait

menu multikolom
4/ 5
Oleh