Cara membuat menu Multi Kolom - E-Learning With Blog
Headlines News :
Home » » Cara membuat menu Multi Kolom

Cara membuat menu Multi Kolom

Written By Ahmad Nurhakim on Sabtu, 07 Januari 2012 | 21.42

Cara membuat menu multi kolom pada blog Pada blog tutorial blogtegal kali ini akan membahas tentang membuat menu multi kolom, yang mana walaupun trik ini sudah lama dan sudah banyak bertebaran di maya internet, namun tak ada salahnya kalau blog tutorial blogtegal akan menulisnya kembali. Mungkin saja para newbie belum ada yang tahu cara membuat menu multi kolom, membuat kolom multi tab dan kebetulan nemu di blogtegal ini.
Menu Multi Kolom ini banyak fungsinya, yang mana fungsi utama di ciptakannya multi kolom ini yakni memampatkan widget-widget ke dalam 1 menu atau menggabungkan beberapa widget ke dalam 1 widget melalui menu multi kolom.
Biasanya menu ini di ěsi dengan daftar link blog, recent comment, dll sesuai kehendak si pemilik dan pembuat blog. Dan yang pasti menu ini menhemat space (ruang) blog pada sidebar.
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.
Share this article :

0 comments:

Speak up your mind

Tell us what you're thinking... !

SubScriber

Masukan alamat Email kamu disini untuk mendapatkan artikel terbaru..!

Add to Google Reader or Homepage

Join Member

 
Support : Creating Website | Johny Template | Mas Template
Proudly powered by Blogger
Copyright © 2011. E-Learning With Blog - All Rights Reserved
Template Design by Creating Website Published by Mas Template