Cara Membuat Menu dropdown di Blog

Menu dropdown adalah saat kita arahin kursor mouse salah satu menu di navbar, tiba-tiba mucul panjang kebawah (sub menu) itulah yang di maksud dengan Dropdown Menu. belum jelas ???!
coba liat gambar di bawah ini :

OK. sekarang kita perhatikan cara buatnya :
1. Login ke Blogger.
2. Pilih Edit Tamplate
3. pilih Edit HTML

4. cari kode

 ]]></b:skin>

5. Silakan anda copy kode di bawah ini :

/* ----- NAVBAR MENU ----- */
#NavbarMenu {

width: 780px;
height: 30px;
background:#99C9FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEW0_Z-LypF5QXEMdwwSIlNimciAJNJnNkSHo16ckv2R7ySmzhWh786m5zwxi8cI9fT7hTeht0jp-i2ai4rpIzcDlPqammlOc3q_LS8NaENIRYb7tc5vEhXAE3HPJfJ39wj_hTKrBs6FEp/s800/navbar.gif) repeat-x top;
color: #3D81EE
margin: 0 auto 0;
padding: 0;
font: bold 11px Arial, Tahoma, Verdana;
border-top: 1px solid #AFAFAF;
border-bottom: 1px solid #FFFFFF;
}
#NavbarMenuleft {
width: 680px;
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 {
color: #3D81EE;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: normal 14px ARIAL;
}
#nav li a:hover, #nav li a:active {
background:#99C9FF;
color: #3D81EE;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #3D81EE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEW0_Z-LypF5QXEMdwwSIlNimciAJNJnNkSHo16ckv2R7ySmzhWh786m5zwxi8cI9fT7hTeht0jp-i2ai4rpIzcDlPqammlOc3q_LS8NaENIRYb7tc5vEhXAE3HPJfJ39wj_hTKrBs6FEp/s800/navbar.gif) repeat-x top;
width: 150px;
color: #000;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #99C9FF;
border-left: 1px solid #99C9FF;
border-right: 1px solid #99C9FF;
font: normal 15px,;
}

#nav li li a:hover, #nav li li a:active {
background: #99C9FF;
color: #3D81EE;
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;
}

 6. Simpan di atas kode ]]></b:skin>

catatan :
pada text yang berwarna hijau di atas sesuaikanlah dengan lebar tamplate yang anda gunakan

 7. Setelah itu silakan copy kode berikut ini :

<div id=NavbarMenu>

<div id=NavbarMenuleft>

<ul id=nav>

<li><a expr_href=data:blog.homepageUrl>Home</a></li>

<li><a href=Link-Kamu>Tentang Kami</a>

<ul>

<li><a href=Link-Kamu>Sejarah Perusahaan</a></li>

<li><a href=Link-Kamu>Profil Perusahaan</a></li>

<li><a href=Link-Kamu>Struktur Organisasi</a></li>

<li><a href=Link-Kamu>Hubungi Kami</a></li>

</ul>

</li>

<li><a href=Link-Kamu>Komputer</a></li>

<li><a href=Link-Kamu>Hardware</a></li>

<li><a href=http://millacell.co.cc>Software</a>

<ul>

<li><a href=http://millacell.co.cc>Antivirus</a></li>

<li><a href=Link-Kamu>Download MP3</a></li>

<li><a href=Link-Kamu>Desktop Enhancements</a></li>

<li><a



href=Link-Kamu>Software

Pembuat Banner</a></li>

<li><a href=#>Internet</a>

<ul>

<li><a href=http://millacell.co.cc>Dial-Up n Connectivity</a></li>

<li><a href=http://millacell.co.cc>Security and Spyware</a></li>

<li><a href=http://millacell.co.cc>Peralatan</a></li>

</ul>

</li>

<li><a href=Link-Kamu>System Tools</a></li>

<li><a href=Link-Kamu>Others</a></li>

</ul>

</li>

<li><a href=Link-Kamu>Template</a>

<ul>

<li><a



href=http://millacell.co.cc>New Blogger Template</a></li>

<li><a href=Link-Kamu>Classic Template</a></li>

</ul>

</li>

<li><a href=#>Tutorial</a>

<ul>


<li><a href=http://millacell.co.cc>Belajar Blogspot</a></li>
<li><a



href=http://millacell.co.cc>Tutorial

Mudah Blog</a></li>
</ul>

</li>

<li><a

href=/feeds/posts/default><img

src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3nJ7ZLlN9OdXq6KrZMkCuvkgz-evC3PVedk7xGSnGAGiu9K6G32OhTWMMcIxfI5xRA7MUlTV8XVUr8WYh6H3FTrCB0_2mdnQMy_vcf_gGOsPMQfNhVOHI9zuqFngpyj4J-Jnlj9-AXno/s1600/rss.gif

style=vertical-align:middle/> RSS Feeds</a></li>

</ul>

</div>

 8. Simpan dalam HTML/JavaScript


9. save.

10. Letakkan dibawah Judul Blog Anda




keterangan :

1. jika anda ingin menambah dropdown lagi tinggal tambahkan saja kode :

<li><a href=#>Tutorial</a>
<ul>

<li><a href=http://millacell.co.cc>Allay Web</a></li>

<li><a href=http://millacell.co.cc>Allay Web</a></li>

</ul>
</li>
Catatan :
Yang berwarna ungu di atas adalah "tutorial" adalah menu yang akan di buat dropdown ke bawah oleh kita. jadi bila nanti anda ingin membuat dropdown tambahan, tambahkan saja kode pada kumpulan kode menu pada no.7

2. Di atas, saya banyak menuliskan link ke arah blog ini, ganti dengan link yang ingin anda tuju, bisa ke arah blog anda atau orang lain.

Related Posts by Categories