kali ini saya akan mengajarkan cara membuat
Menu Horizontal menggunakan javascript, contoh hasilnya adalah screen shot di samping ini!, karena pake' javascript jadi prosesnya akan mudah <dijamin bisa> karena kita tidak perlu pusing'' memikirkan HTML yang sungguh terlalu susahnya! saya sendiri juga males klo harus berhadapan dengan HTML! sekarang klo ada yang mudah ngapain cari yang susah, buang buang waktu! bukan begitu?, oke langsung keInti posting ini aja!
Pertama-tama : Dasboard-->design-->Edit HTML(b.english) | Dasbor-->Rancangan-->Edit HTML(b.indo)
Kedua : BACKUP dulu!(apa itu BACKUP|klik ini) oke sudah backup langsung, cari kode ini|
]]></b:skin> |cara mencarinya Tekan CTRL+F truzz copas kode tadi di kolom pencarian dan Enter, oke klo sudah ketemu Sisipkan kode diBawah ini tepat diAtas kode ]]></b:skin>
#NavbarMenu { background: #000; width: 300px; height: 20px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 400px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { background: #222222; height: 15px; color: #fff; display: block; font-size: 11px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #222222; color: #ffffff; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #ffffff; width: 150px; color: #222222; font-size: 11px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #222222; color: #ffffff; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; }
OKe, klo sudah dipasang langsung klik ''Simpan Template''
Ketiga : Klik ; Elemen Laman-->Tambah Gadget (kolom yg diatas/dibawah header)--> HTML/Java script
kemudian masukan kode dibawah ini
<div class='menuhorisontal'>
<ul id='nav'>
<li><a href='
Link Yg Dituju'>
Nama Tampilan</a> </li>
<li><a href='
Link Yg Dituju'>
Nama Tampilan</a>
<ul>
<li><a href='
Link Yg Dituju'>
Nama Tampilan</a> </li></ul></li></ul></div>
setelah itu KLIK SAVE dan lihat hasilnya!
#Keterangan :
Warna Orange = Sebagai pembuka
Warna Biru = link/alamat yg akan dituju jiga ''Nama Tampilan'' DiKlik
Warna Merah = Nama tampilan pada kolom ''menu'' contoh : HOME, PROFIL, dsb,.!
Warna Ungu = untuk menu saja
Warna Hijau muda = Untuk Menu yg jika ''Nama Tampilan'' disorot maka akan keluar sub-menu!
Warna Hijau Tua = Untuk Submenu dari menu(hijau muda)
Warna Pink = sebagai penutup!
*kalian bida menambah atau mengurangi menu/submenu dengan menambah/menghapus html-nya
Jangan Lupa tambahkan coment tentang psoting ini!
