Cara Membuat Menu Multi Kolom pada Blog

Selasa, 30 Oktober 2012 | komentar (3)

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 isi 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 atas.

Berikut tutorial dari membuat Menu Multi Kolom tersebut:

  • 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 dengan 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'/>
  • 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 Sekali lagi.
Selamat Mencoba.
Share this article :
Ping your blog, website, or RSS feed for Free
Posted by: chirenxz Library chirenxz Library, Updated at: 11.06

+ komentar + 3 komentar

24 November 2012 22.19

Belum jalan di blog gue gan

24 Juni 2013 11.16

masih belum berhasil bos, agak susah

terimakasih infonya gan

Posting Komentar

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. cHirenxz Library - All Rights Reserved
Proudly powered by Blogger