Mau buat menu dropdown seperti diatas silakan saja ikutilangkah-langkah diabawah ini insya Allah di jamin paling mudah dari tutorial-tutorial yang pernah ada.
Bagaimana menurut anda.........................
Dalam demo di atas mungkin warna menu navigasinya belalar belakang hitam. tetapi jangan kuatir. Anda dapat mengubah warnanya leluasa dan tanpa harus pusing-pusing. cukup mengubah 2 kode warna, dalam 5 detik navigasi menu dropdown kita sesuai dengan template kita.
Inilah trik membuat navigasi menu drop down tersebut.
1. Login ke Blogger
2. Pilih Rancangan
3. Pilih Edit HTML
4. Jangan Lupa Untuk Membackup dulu template blog anda, klik Download Template Lengkap
5. Silakan copy kode di bawah ini :
#NavbarMenu{background:#000000; width:960px; 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;}
6. Setelah itu cari kode berikut ]]></b:skin>
7. Setelah ketemu simpan kode yang sudah di copy tadi dan paste kan tepat di atas
]]></b:skin>
8. Selanjutnya silakan hapus kode menu navigasi anda sebelumnya yang berada di bawah
<body> atau
<body class='loading'>
kalau belum menemukan coba cari saja kode
<body kalau sudah ketemu, simpan saja kode sesudah kode tersebut.
9. Setelah itu ganti dengan kode berikut :
<div id='outer'>
<div id='navbarmenu'>
<div id='navbarmenuleft'>
<ul id='nav'>
<li><a href='http://www.desapurbayasa.blogspot.com'>Home</a></li>
<li><a href='http://www.desapurbayasa.blogspot.com'>Profil</a>
<ul><li><a href='http://www.desapurbayasa.blogspot.com'><em>Peta Desa</em></a></li>
<li><a href='http://www.desapurbayasa.blogspot.com'><em>Profilku</em></a></li>
<li><a href='http://www.desapurbayasa.blogspot.com'><em>Profil Desa</em></a></li>
</ul></li>
<li><a href='http://www.desapurbayasa.blogspot.com'>Produk Hukum</a>
<ul><li><a href='http://www.desapurbayasa.blogspot.com'><em>Perdes</em>   »</a>
<ul><li><a href='http://www.desapurbayasa.blogspot.com'><em>No. 1 Th. 2012 Tttg Lelang Tanah Tanah Kas Desa</em></a></li>
<li><a href='http://www.desapurbayasa.blogspot.com'><em>No. 2 Th. 2012 Tttg Lelang Tanah Eks Sekdes</em></a></li>
<li><a href='http://www.desapurbayasa.blogspot.com'><em>No 3 Th. 2012 Tttg Pensiunan Kades</em></a></li>
</ul></li>
<li><a href='http://www.desapurbayasa.blogspot.com'><em>Keputusan Kades</em>   »</a>
<ul><li><a href='http://www.desapurbayasa.blogspot.com'><em>-</em></a></li>
<li><a href='http://www.desapurbayasa.blogspot.com'><em>-</em></a></li>
</ul></li>
<li><a href='http://www.desapurbayasa.blogspot.com'><em>Keputusan Lainnya</em>   »</a>
<ul><li><a href='http://www.desapurbayasa.blogspot.com'><em>-</em></a></li>
<li><a href='http://www.desapurbayasa.blogspot.com'><em>-</em></a></li>
</ul></li>
</ul></li>
<li><a href='http://www.desapurbayasa.blogspot.com'>Arsip</a>
<ul><li><a href='http://www.desapurbayasa.blogspot.com'><em>Desa</em>   »</a>
<ul><li><a href='http://www.desapurbayasa.blogspot.com'><em>Memori Serah Terima Jabatan Kades</em></a></li>
<li><a href='http://www.desapurbayasa.blogspot.com'><em>Struktur Organisasi Pemerintahan Desa Purbayasa</em></a></li>
</ul></li>
<li><a href='http://www.desapurbayasa.blogspot.com'><em>BPD</em>   »</a>
<ul><li><a href='http://www.desapurbayasa.blogspot.com'><em>-</em></a></li>
<li><a href='http://www.desapurbayasa.blogspot.com'><em>-</em></a></li>
</ul></li>
<li><a href='http://www.desapurbayasa.blogspot.com'><em>LPMD/LKMD</em>   »</a>
<ul><li><a href='http://www.desapurbayasa.blogspot.com'><em>-</em></a></li>
<li><a href='http://www.desapurbayasa.blogspot.com'><em>-</em></a></li>
</ul></li>
<li><a href='http://www.desapurbayasa.blogspot.com'><em>PNPM-MP</em>   »</a>
<ul><li><a href='http://www.desapurbayasa.blogspot.com'><em>-</em></a></li>
<li><a href='http://www.desapurbayasa.blogspot.com'><em>-<em></em></em></a></li>
</ul></li>
<li><a href='http://www.desapurbayasa.blogspot.com'><em>PKK</em>   »</a>
<ul><li><a href='http://www.desapurbayasa.blogspot.com'><em>Memori Pertanggungjawaban PKK Th. 2005-2011</em></a></li>
<li><a href='http://www.desapurbayasa.blogspot.com'><em>-</em></a></li>
</ul></li>
<li><a href='http://www.desapurbayasa.blogspot.com'><em>Posyandu</em>   »</a>
<ul><li><a href='http://www.desapurbayasa.blogspot.com'><em>-</em></a></li>
<li><a href='http://www.desapurbayasa.blogspot.com'><em>-</em></a></li>
</ul></li>
<li><a href='http://www.desapurbayasa.blogspot.com'><em>BKD</em>   »</a>
<ul><li><a href='http://www.desapurbayasa.blogspot.com'><em>-</em></a></li>
<li><a href='http://www.desapurbayasa.blogspot.com'><em>-</em></a></li>
</ul></li>
</ul></li>
<li><a href='http://www.desapurbayasa.blogspot.com'>Pengelolaan Desa</a>
<ul><li><a href='http://www.desapurbayasa.blogspot.com'><em>APBDes</em></a></li>
<li><a href='http://www.desapurbayasa.blogspot.com'><em>Penatausahaan APBDes</em></a></li>
</ul></li>
<li><a href='http://www.desapurbayasa.blogspot.com'>Berita</a>
<ul><li><a href='http://www.desapurbayasa.blogspot.com'><em>Desa</em>   »</a>
<ul><li><a href='http://www.desapurbayasa.blogspot.com'><em>Tujuh Kades Dilantik Demokrasi di Desa Dinilai Baik</em></a></li>
<li><a href='http://www.desapurbayasa.blogspot.com'><em>Warga Purbayasa Tuntut Perbaikan Jalan Desa</em></a></li>
</ul></li>
<li><a href='/'><em>Umum</em>   »</a>
<ul><li><a href='http://www.desapurbayasa.blogspot.com'><em>Akuarium Raksasa Purbasari Pancuran Mas</em></a></li>
<li><a href='/'><em>-</em></a></li>
</ul></li>
</ul></li>
<li><a href='http://www.desapurbayasa.blogspot.com'>Album</a>
<ul><li><a href='http://www.desapurbayasa.blogspot.com'><em>Foto ADD Th. 2011</em></a></li>
<li><a href='http://www.desapurbayasa.blogspot.com'><em>Foto Pembangunan Tembok Keliling PAUD</em></a></li>
</ul></li>
<li><a href='http://www.desapurbayasa.blogspot.com'>Software</a>
<ul><li><a href='http://www.desapurbayasa.blogspot.com'><em>-</em></a></li>
<li><a href='http://www.desapurbayasa.blogspot.com'><em>-</em></a></li>
</ul></li>
<li><a href='http://www.desapurbayasa.blogspot.com'>Tips Trik</a>
<ul><li><a href='http://www.desapurbayasa.blogspot.com'><em>Komputer</em>   »</a>
<ul><li><a href='http://www.desapurbayasa.blogspot.com'><em>-</em></a></li>
<li><a href='http://www.desapurbayasa.blogspot.com'><em>-</em></a></li>
</ul></li>
<li><a href='/'><em>Blogs</em>   »</a>
<ul><li><a href='http://www.desapurbayasa.blogspot.com'><em>-</em></a></li>
<li><a href='http://www.desapurbayasa.blogspot.com'><em>-</em></a></li>
</ul></li>
<li><a href='/'><em>Lainnya</em>   »</a>
<ul><li><a href='http://www.desapurbayasa.blogspot.com'><em>-</em></a></li>
<li><a href=''http://www.desapurbayasa.blogspot.com''><em>-</em></a></li>
</ul></li>
</ul></li>
<li><a href='/'>Link</a>
<ul><li><a href='http://www.desapurbayasa.blogspot.com'><em>BAPERMASDES PBG</em></a></li>
</ul>
</li></ul></div>
</div></div>
Keterangan : Ganti semua alamat link anda / blog anda. dan tulisan menu ganti dengan nama menu yang ingin di tampilkan.
Dan blog pertama yang saya bantu dengan turun langsung masuk ke akun blognya untuk memasang kode navigasi ini
Semoga tutorial ini bermanfaat bagi anda.
Print This Page
![download[4]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tzTmrQjLG3yyxTDGocWGSdeClm3GvJUcAwPo2oRB6xPMo-wMki0sUDEzjwbgRNTmNeEpksD9PVrviMP-rlxWElrnBurMNhQ_S3gb7ZQYYFylvplCSVVa5OEjaBxKBjEBzjOw=s0-d)
