Membuat Menu Java Script

Menu horizontal di atas dibuat dengan menggunakan html script dan css, menurut beberapa sumber menu horisontal yang dibuat menggunakan script css + html lebih mudah ditelusurioleh robot search engine dibanding jika menggunakan menu yang dibuat menggunakan javascript.Untuk membuatnya bisa lakukan langkah berikut:

1. Login ke account blogger andaPilih Dashboard -> Tataletak -> Edit HTMLcari kode berikut:]]></b:skin>

2. Di bagian atas kode tersebut masukkan kode berikut/* Navbar */#menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url(http://i36.tinypic.com/28lgntl.jpg) repeat-x;opacity: 0.99; filter: alpha(opacity: 98);}#menu-cari{float:right; display:inline; padding:3px 5px 0 0;}#menu ul{padding:0; margin:0;}#menu ul li{padding:0; margin:0; list-style:none; display:block; float:left;}#menu ul li a{float:left; padding-left:15px; display:block; color:#ffffff; text-decoration:none; font:12px Verdana, Arial, Helvetica,sans-serif; background:url(http://i36.tinypic.com/28lgntl.jpg) 0px -30px no-repeat; line-height:30px; padding-right:15px;}#menu ul li a:hover{background-position:0px -60px; color:#ffffff;}#menu ul li a.active, .menu li a.active:hover{background-position:0px -90px; color:#ffffff;}#menu ul li ul {display:none;}#menu ul li:hover ul, #menu ul li.hover ul {position: absolute; max-width:175px;display: block; background:#000000; margin:2px; clear:left; margin-top:30px;}#menu ul li:hover ul li, #menu ul li.hover ul li {width:175px; float: left; background: display: block;}#menu ul li:hover ul li a, #menu ul li.hover ul li a{border-top:1px dotted #fff; background:black; width:175px;}#menu ul li:hover ul li a:hover,#menu ul li.hover ul li a:hover{background:#7C01A4;}.status-msg-wrap{display:none;}

4. Klik tombol "Simpan Template"

5. Buka halaman "Tata Letak -> Elemen Halaman"

6. Pada Elemen header , klik " Tambah Gadget"

7. setelah mengklik tombol "tambah gadget" pilih HTML/Javascript8. pada kotak dialog html/javascrpit masukkan kode html berikut:<div id="menu"><ul><li><a class="active" href="/"> Home</a></li><li><a href="#">Menu 1</a></li><li><a href="#">Menu 2</a><ul><li><a href="#">Menu 2.1</a></li><li><a href="#">Menu 2.2</a></li></ul></li><li><a href="#">Menu 3</a><ul><li><a href="#">Menu 3.1</a></li><li><a href="#">Menu 3.2</a></li><li><a href="#">Menu 3.3</a></li><li><a href="#">Menu 3.4</a></li></ul></li><li><a href="#">Menu 4</a></li><ul></ul></ul></div>catatan:Pada bagian : href="#" , tanda # anda ganti dengan url tujuan anda.Misal :http:/obilate.blogspot.com/iteks setelah tanda # seperti Home, Menu 1, dst bisa anda ganti dengan tekssesuai dengan keinginan anda.9. Simpan perubahan yang anda buat, jika tidak ada masalah maka akan tampil menu navigasinya

Unknown 05 Agustus Komentar