 Mumpung mood lagi bagus,mumpung doku lagi tebel dan mumpung blog lagi sepi,saya mencoba untuk memposting kembali kaitannya belajar menghias blog.Beberapa minggu lalu saya sudah bagikan dari informasi yang saya dapat dari dunia maya,bagaimana membuat menu navigasi css di blogger.Bagi yang belom membaca,silakan langsung klik di sini. Nah,dari email sahabat yang saya terima,menanyakan bagaimana sih membuat menu navigasi horisontal / horizontal dengan submenu / sub menu navigasi vertikel seperti pada blog ini?Bukan suatu kesengajaan,menu navigasi dengan sub menu ini juga saya peroleh dari hasil surfing berbagai blog tutorial untuk blogspot. Bagi kamu yang penasaran bagaimana cara membuat menu navigasi dengan sub menu,bisa ikuti langkah berikut ini. Langkah dan Cara Membuat Menu Navigasi dengan Sub Menu Untuk Blogger
|
Membuat Menu Navigasi Horizontal Dengan Sub Menu Navigasi Vertikal
Membuat Menu Navigasi CSS Di Element Baru
 Disini kita akan membahas tentang bagaimana membuat menu makanan 4 sehat 5 sempurna, Hus !! bukan,maksudnya Menu Navigasi dengan CSS.  Tapi tidak seperti kebanyakan,biasanya mereka meletakkan di bawah kode <body>,tapi di sini kita akan meletakkan kodenya di Element HTML/Javascript yang baru. Apa itu CSS? kita akan bahas beberapa hari lagi,berhubung yang kita bahas kali ini Menu Navigasinya. Seperti apa sich contoh Menu Navigasi?Navigasi pada web / blog,sesuai dengan namanya,yaitu untuk menuntun jalan,supaya web / blog lebih mudah di telusuri.Contoh bentuk fisiknya seperti di bawah ini : Untuk membuatnya kali ini,kita minta bantuan CSS,apa itu CSS,kita bahas naa..ant : (,tadi sudah di omongiiin!!!! #$%#!  .Cara membuatnya sederhana sekali,berhubung kita dengan bantuan CSS,kita tak perlu membuat tabel untuk Menu Navigasi seperti di atas. Tapi,yang paling surprise buat gw waktu aku jalan-jalan ke Blok-M,tiba-tiba aku ngliat yang belum pernah...OOee!!Ngemeng aja!ntar aja ceritanya ngapa !! Ok! berhubung ntar malah tambah bikin rusuh suasana,kan dapet dosa tuh!,kalo dosa,kita masuuk Nera...@#$@#$@!!gUBRAK! gw bilang ntar ya ntar ceritanyaaa!!  Ya..ya.ntar aja ceritanya ya..Ok langsung ke topik,kita hari ini. Langkah pertama,pergi ke Dashboard (untuk blogspot),lalu pilih Tata Letak,selanjutnya pilih tab Edit HTML. Lalu cari kode ]]></b:skin>,jika sudah ketemu,tepat diatasnya,letakkan kode di bawah ini :#NavbarMenu { background: #000; width: 400px; height: 10px; 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; }Jika kode sudah anda letakkan,lalu Simpan Template. Selanjutnya pilih Tab Tata Letak,dan buat Element Baru / Add New Widget,pilih HTML / Javascript. Lalu letakkan kode di bawah ini pada halaman HTML / Javascript yang baru saja anda pilih. Jika kode sudah anda letakkan,lalu pilih Simpan,dan anda bisa langsung lihat hasilnya. Untuk http:/// ,anda isi dengan alamat URL yang akan di tuju,sedagkan untuk Menu 1,2,3,4 ,Untuk tulisan yang akan tampil,sedangkan jika ingin menambahkan satu kolom lagi,anda tinggal menulis satu baris lagi,baris yang mana?Copy aja salah satu kode : <li><a href='http:///'>Menu 4</a></li>,dan paste persis di bawahnya. |
