Cara Membuat Menu Multi Kolom

Haii Ozzilatos .., :D

gimana kabar nih ?? langsung aja saya share artikel nih ., semoga bermanfaat ya . its oke langsung aja

Cekidot :

Cara Membuat 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 Fauzi-Knowledge akan menulisnya kembali. Mungkin saja para newbie belum ada yang tahu  dan kebetulan nemu di Fauzi-knowledge ini .

Menu Multi Kolom ini banyak fungsinya, yang mana fungsi utama di ciptakannya multi kolom ini yakni memampatkan  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:

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, masukan script pemanggil berikut sebelum kode </head>

<script src='http://fauzi-knowledge.blogspot.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.

Selamat berexperimen untuk membuat menu multi kolom atau menu multi tab.