Selamat Datang, terima kasih telah berkunjung."Disini kita bukan untuk saling bersaing, kita ada disini untuk saling melengkapi"

29 Maret 2012

Membuat menu multi kolom pada blog

Berbagi Apa Saja  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 tab
Ikuti 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.

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



    sumber: http://www.blogtegal.com/2011/02/cara-membuat-menu-multi-kolom.html

    Disebarluaskan oleh : Joko Sun - "Berbagi Apa Saja"

    Jokosun Kamu telah membaca artikel tentang Membuat menu multi kolom pada blog. Kamu boleh copy paste artikel ini. Jika di bawah artikel ditulis sumbernya, cantumkan sumbernya, jika tidak mohon cantumkan kode di bawah ini:

    0 komentar:

    Poskan Komentar

    Pedang yang tajam mengakibatkan luka yang dalam. Namun kata-kata yang tajam bisa melukai hati. Hati yang luka lebih sukar untuk menyembuhkannya.