Kemarin saya ditanya oleh seorang teman, apa itu menu multy 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... asasnya begitulah apa yang saya faham.Untuk lebih jelasnya teman-teman semua dapat lihat disini . Bagaimana menarik kan?
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/AVvXsEiZHLxHx_S1_EKY-6t8Un1nhMIrru7PmmqC9FrPKtfbQ3naroaKIMcpRI84G9tDdXYIrjOsvyr-Uy9MxumJ4qM4eY0KzbOOh-6-gVcCyw31ddxmbWvW0A8cb3Zkky5u9AnBnw-Dq_WHmAIG/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/AVvXsEiZHLxHx_S1_EKY-6t8Un1nhMIrru7PmmqC9FrPKtfbQ3naroaKIMcpRI84G9tDdXYIrjOsvyr-Uy9MxumJ4qM4eY0KzbOOh-6-gVcCyw31ddxmbWvW0A8cb3Zkky5u9AnBnw-Dq_WHmAIG/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;}
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>
Gantilah tulisan http://copynpasteblog.blogspot.com dengan link atau url yang anda inginkan. Anda boleh menambah atau mengurangi jumlah kode tersebut.
5. Klik Simpan Template.
Selamat mencuba...
|
|
NAMA ANDA
| MASUKKAN TOMBOL TWEET DISINI |
|
0 ulasan:
Catat Ulasan