menu multikolom

By : Naldo hatake 0 Comment

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.
Naldz Harry Hatake

Author :

Anda Baru Saja Membaca Artikel Tentang menu multikolom ,Anda Boleh Menyebarluaskan / Mengcopy Paste Artikel menu multikolom Ini Jika Bermanfaat Buat Anda , Namun Saya Mohon Untuk Mencantumkan Link menu multikolom Sebagai SumberNya Dan jangan Lupa Berikan Komentarnya. Terimakasih atas kunjungannya kalian baru saja membaca artikel berjudul menu multikolom
.
Share Artikel

Artikel Terkait

-----------GUNAKAN GOOGLE CROME UNTUK TAMPILAN MAKSIMAL BLOG INI-----------

Berikan Comentarnya ya Gan, :)
--Berkomentarlah yang Relevan
--Berkomentar dengan bahasa yang baik dan benar
--Dilarang membuat rusuh [-(
--Dilarang meletakan LINK aktif [-(
--Dilarang meletakan link porno/iklan [-(
--Boleh meletakan Link non aktif selama tidak menyalahi aturan :-)
--Jika ingin dikunjung/komentar balik(yang sebelumnya belum ada perjanjian) harap sertakan link non aktif

---Terimakasih Telah Berkunjung Dan Komentarnya

“Selamat Datang DiBlog Naldo Hatake”
Saya Naldz Harry Hatake selaku Admin disini mengucapkan TerimaKasih Kepada agan Yang telah berkunjung keblog Sederhana Ini, "Semoga Pada Artikel yang akan Agan baca dan simak bisa bermanfaat untuk agan", "Pastikan anda menggunakan GOOGLE CROME agar tampilan tidak kacau"
"Jangan lupa berikan comentarnya YA :)"

Lanjutkan →