Membuat Menu Navigasi Horizontal Drop Down di Blog

 Assalamualaikum sobat semuanya .....

Pada kesempatan yang berbahagia ini saya akan share tentang Cara Membuat Menu Navigasi Horizontal Drop Down di Blog, mungkin dari sebagian sobat udah ada yang mengetahui cara Membuat Menu Navigasi Horizontal Drop Down di Blog, dan ada juga yang udah menerapkannya di blog,, Menu Navigasi Drop Down memang menjadi andalan para bloger untuk mempersingkat dan memperjelas, daftar postingnya.. dari sekian banyak style Menu navigasi drop down, disini saya akan coba menerangkan menu navigasi dropdown yang simple aja... Simple Drop Down

Kalo sobat tertarik ,, Ikuti langkah-langkahnya ::

1. Login ke Blog sobat

2. Pilih Template - Edit HTML - klik ''expand template widget'' di bagian atas

3. Cari code ]]></b:skin> . Untuk mempercepat, gunakan pencarian dengan klik CTRL+F, maka akan muncul di bgian bawah sidebar

4. Copy Code berikut ::

#NavbarMenu{background:#000000; width:1100px; height:32px; color:#5A6C8C; margin:0 auto; padding:0 5px; font:bold 8px Arial, Tahoma, Verdana; border-top:1px solid #666; border-bottom:1px solid #666;} #NavbarMenuleft{width:700px; float:left; margin:0; padding:0;} #search{width:240px; font-size:11px; float:right; 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; text-shadow:1px 1px 1px #000;} #nav li a, #nav li a:link, #nav li a:visited{color:#fff; display:block; text-transform:uppercase; margin:0; padding:9px 15px 9px; font:bold 11px Arial, Times New Roman;} #nav li a:hover, #nav li a:active{background:#4a4d4c; color:#fff; padding:9px 15px 9px; text-decoration:none;} #nav li li a, #nav li li a:link, #nav li li a:visited{background:#000000; width:150px; color:#e5e3e3; text-transform:capitalize; float:none; margin:0; padding:3px 10px; border-bottom:1px solid #151f23; border-left:px solid #151f23; border-right:2px solid #151f23; font:normal 14px Georgia, Times New Roman;} #nav li li a:hover, #nav li li a:active{background:#4a4d4c; color:#fff; padding:3px 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:-24px 0 0 170px;} #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;} #searchbox{padding:0; margin:0;} #search input{background:#fff; color:#000; float:left ;margin:5px 0 0 10px; width:168px; padding:3px 7px; border:1px solid #cdcdcd; font:normal 11px arial, verdana, Times New Roman;} #search .btn{background:#333; color:#fff; font-size:11px; margin:5px 0 0 3px; padding:2px; width:30px; cursor:pointer; border-left:1px solid #666; border-top:1px solid #666; border-right:2px solid #111; border-bottom:2px solid #111;} #top{background:#f6f6f6; margin:10px auto 0; padding:10px; width:918px; border:1px solid #ccc; word-wrap: break-word; overflow: hidden; font-size:13px;} #top a, #top a:visited{font-weight: normal; color: #00338F; text-decoration: none;} #top a:hover{color:#cc0000; text-decoration: underline;} #top p {font-size: 14px; font-weight: bold; padding: 0; margin: 0;} .topleft {width: 304px; float: left; margin: 0; padding:0;} .topleft img a, .topleft img {border:1px solid #ccc; margin: 0; padding: 1px;} .topright {width: 600px; float: right; margin:0; padding:0; text-transform: normal;}

5. Paste code tadi tepat di atas ]]></b:skin> . SIMPAN pengaturan !
6. Sekarang sobat masuk ke ''Tata Letak - Pilih Tambah Gadget (pilih tambah gadget yang dibawah heading atau judul blog sobat).
7. Pilih tambah HTML/Java Script.

8. Copy dan Paste Code berikut ::

<div id='outer'> <ul id='nav'> <li><a href='http://remajasampit.blogspot.com'>HOME</a></li> <li><a href='http://remajasampit.blogspot.com/2012/01/daftar-sinopsis-novel.html'>SINOPSIS NOVEL</a> <li><a href='#'>BAHASA</a> <ul> <li><a href='http://remajasampit.blogspot.com/2012/01/membaca-fkip-pbsi-smester-1.html'>MEMBACA</a></li> <li><a href='http://remajasampit.blogspot.com/2012/01/menyimak-fkip-pbsi-smester1.html'>MENYIMAK</a></li> <li><a href='http://remajasampit.blogspot.com/2012/02/daftar-isi-bahasa-bantu.html'>BHS BANTU</a></li> </ul></li> <li><a href='http://remajasampit.blogspot.com/2012/01/hrefhttpremajasampit.html'>SASTRA</a> <ul> <li><a href='http://remajasampit.blogspot.com/2012/01/teori-sastra-1.html'>TEORI SASTRA</a></li> <li><a href='http://remajasampit.blogspot.com/2012/01/hrefhttpremajasampit.html'>DRAMA & PUISI</a></li> </ul></li> <li><a href='#'>ISLAM</a> <ul> <li><a href='http://remajasampit.blogspot.com/2012/02/daftar-gratis-ebook-islami.html'>EBOOK ISLAM</a> <li><a href='http://remajasampit.blogspot.com/2012/01/mukaddimah-ceramah-beserta-artinya.html'>CERAMAH</a> <li><a href='http://remajasampit.blogspot.com/2012/02/daftar-mp3-islami.html'>MP3 ISLAMI</a></li> </li></li></ul></li> <li><a href='#'>DOWNLOAD</a> <ul> <li><a href='http://remajasampit.blogspot.com/2012/01/all-movie.html'>ALL FILM</a> <li><a href='http://remajasampit.blogspot.com/search/label/gratis%20game'>ALL GAME</a> <li><a href='http://remajasampit.blogspot.com/2012/03/daftar-download-brush-photoshop.html'>BRUSH PHOTOSHOP</a> <li><a href='http://remajasampit.blogspot.com/2012/01/daftar-gratis-software.html'>SOFTWARE</a></li> <li><a href='http://remajasampit.blogspot.com/2012/01/judul-game-type-assasins-creed.html'>TRAINER GAME</a></li> </li></li></li></ul></li> <li><a href='#'>ZONA ANEH</a> <ul> <li><a href='http://remajasampit.blogspot.com/2012/01/daftar-semual-hal-yang-aneh-dan-unik.html'>SEMUA ANEH</a> <li><a href=''>KUMPULAN CERITA</a> </li></li></ul></li> <li><a href='#'>KOTA SAMPIT</a> <ul> <li><a href='http://remajasampit.blogspot.com/2012/01/mengenal-sampit.html'>TENTANG SAMPIT</a> <li><a href='http://remajasampit.blogspot.com/2012/01/galeri-kota-sampit.html'>GALERI SAMPIT</a> <li><a href='http://remajasampit.blogspot.com/2012/03/galeri-foto-kota-sampit.html'>GALERI FOTO</a> </li></li></li></ul></li> <li><a href='http://remajasampit.blogspot.com/2012/01/daftar-tutorial-blog.html'>TUTORIAL BLOG</a></li> <li><a href='http://remajasampit.blogspot.com'><blink><b>XX</b></blink></a></li> </li></ul></div>

9. Simpan Widget baru sobat ,,, CATATAN :: URL link di ganti dengan URL yang sobat inginkan .. dan nama Menu sobat ganti dengan nama yang sobat inginkan. OK sob.. selesai deh ..