Kemarin
saya ditanya oleh seorang temen, apa itu menu drop down dan bagaimana cara
membuatnya. Perlu teman-teman semua ketahui menu drop down adalah menu
horisontal yang terdapat di bawah header blog. Dan apabila mouse kita letakkan
ke salah satu menu tersebut akan muncul sub menu yang susunannya ke bawah. yang
tentunya menu yang berkaitan Ah... pokoknya gitulah menurut pengertian saya. Lihat contoh gambar dibawah ini
Untuk cara membuatnya, saya akan
jelaskan satu persatu, perhatikan baik-baik ya..........
1. Cari kode berikut ]]></b:skin>
2. Lalu letakkan kode berikut ini.
#navdropdownmenu{
background:#99C9FF
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsdG6OXNJEHzyIhIXPY0z5CeZCAaQATmLjX8w_PYzmh-0Zn5gMVxibz_BUBPhQuACE-o5xEaSLK2yO7p1IbbO-XKbdnYy6TUHxZrS5aVjBvt278aXn9aslQYBc-WnN1GA4iZWE4tevvy_7/s800/navbar.gif)
repeat-x top;
width:700px;
height:auto;
margin:0;
padding:0;
border-top: 1px solid #AFAFAF;
border-bottom: 1px solid #FFFFFF;
}
#navdropdownmenu ul{
float:left;
list-style:none;
margin:0;
padding:0;
}
#navdropdownmenu li{
list-style:none;
float:left;
}
#navdropdownmenu li a, #navdropdownmenu li a:link,
#navdropdownmenu li a:visited{
color:#000000;
font-weight:bold;
display:block;
text-shadow: 0px 1px 1px #fff;
padding:9px 10px 9px 10px;
font-size: 12px;
font-family: verdana;
text-decoration:none;
}
#navdropdownmenu li a:hover{
background:#9f9f9f;
color:#ffffff;
}
#navdropdownmenu li ul{
z-index:10;
position:absolute;
height:auto;
width:200px;
visibility:hidden;
}
#navdropdownmenu li ul li a, #navdropdownmenu li ul li
a:link, #navdropdownmenu li ul li a:visited{
float:none;
background:#99C9FF
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsdG6OXNJEHzyIhIXPY0z5CeZCAaQATmLjX8w_PYzmh-0Zn5gMVxibz_BUBPhQuACE-o5xEaSLK2yO7p1IbbO-XKbdnYy6TUHxZrS5aVjBvt278aXn9aslQYBc-WnN1GA4iZWE4tevvy_7/s800/navbar.gif)
repeat-x top;
width:200px;
border-width:1px;
border-style:solid;
border-color:#575757;
}
#navdropdownmenu li ul li a:hover{
background:#000000;
color:#ffffff;
}
#navdropdownmenu li:hover ul{
left:auto;
visibility:visible;
}
}
Oya,. jika
anda telah menggunakan navigasi menu yang biasa, hapuslah semua kode CSS dari
navigasi menu tersebut.
3. Cari kode yang mirip dengan kode dibawah.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'
showaddelement='no'>
<b:widget id='Header1' locked='true' title='It's a Hardlife'
type='Header'/>
</b:section>
</div>
4. Dibawahnya, ketikkan kode berikut.
<div id='navdropdownmenu'>
<ul id='navdropdownmenu'>
<li><a href='http://wongsuruh.blogspot.com/search?max-results=1000'>Daftar
Isi</a></li>
<li><a
href='http://en.wikipedia.org/wiki/Norah_Jones'>Norah Jones</a>
<ul>
<li><a href='#'>Don't Know
Why</a></li>
<li><a href='#'>Feelin The Same
Way</a></li>
<li><a href='#'>Come Away With
Me</a></li>
</ul>
</li>
<li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Sting</a>
<ul>
<li><a href='#'>Englishman In
Newyork</a></li>
<li><a href='#'>Shape Of My
Heart</a></li>
<li><a href='#'>Fields Of
Gold</a></li>
<li><a href='#'>If I Ever Lose My Faith In
You</a></li>
<li><a href='#'>Fragile</a></li>
<li><a href='#'>Desert Rose</a></li>
</ul>
</li>
<li><a
href='http://en.wikipedia.org/wiki/Norah_Jones'>Sade</a>
<ul>
<li><a href='#'>Smooth
Operator</a></li>
<li><a href='#'>Kiss Of
Life</a></li>
<li><a href='#'>Your Love Is
King</a></li>
</ul>
</li>
<li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Alanis</a>
<ul>
<li><a href='#'>That I Would Be
Good</a></li>
<li><a href='#'>Front Row</a></li>
<li><a href='#'>One</a></li>
</ul>
</li>
<li><a
href='http://en.wikipedia.org/wiki/Norah_Jones'>Meja</a>
<ul>
<li><a href='#'>Dindi</a></li>
<li><a href='#'>Venus</a></li>
<li><a href='#'>Red Light</a></li>
<li><a href='#'>The One</a></li>
<li><a href='#'>Circle Game</a></li>
<li><a href='#'>Aqua de
Beber</a></li>
</ul>
</li>
</ul>
</div>
</ul>
</div>
Gantilah
tulisan http://wongsuruh.blogspot.com
dengan link yang anda inginkan dengan url yang anda inginkan. Anda bisa
menambah atau mengurangi jumlah kode tersebut.
5. Klik Simpan Template.
6. Lihat hasilnya.
thanks to:maskolis
TERIMAKASIH SUDAH BERKUNJUNG KE BLOG INI, SEMOGA ARTIKEL INI MENAMBAH WAWASAN & MEMBERIKAN MANFAAT BAGI KITA SEMUA YANG MEMBACANYA...JANGAN LUPA UNTUK SELALU BERKUNJUNG KEMBALI...KARENA MASIH BANYAK ARTIKEL MENARIK LAINNYA YANG MENUNGGU UNTUK DIBACA OLEH PARA SOBAT SEMUA.
SELURUH ISI BLOG INI BOLEH DI COPY-PASTE DENGAN SYARAT MENCANTUMKAN LINK SUMBER DARI BLOG INI ( JIKALAU SOBAT TIDAK KEBERATAN ) THANKS... !
SELURUH ISI BLOG INI BOLEH DI COPY-PASTE DENGAN SYARAT MENCANTUMKAN LINK SUMBER DARI BLOG INI ( JIKALAU SOBAT TIDAK KEBERATAN ) THANKS... !
0 Comments