Cara membuat Menu DropDown

Langsung saja...::

1.masuk ke dasbor blog anda
2.Template >> edit HTML

Cari kode ]]></b:skin

Jika sudah ketemu Paste kode di bawah

ul.dropmenu{
position: relative;
margin: 0px;
padding: 1px 0px 0px 0px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5191EpSacL4n7e-upBqiSMuIFDWii7z09-wpT592v9BMkJfWzBnps0DdypZic-ilDGyabEQxcMvMRB2Wo_enZgas13Ls-Dv_K2NeFC5OBKjvTkf8hYxJhlgq3n-_V1g_4pceqYVw1oLo/s1600/navigation.png) repeat-x scroll 0 0;
display:block;
height: 35px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
}
.dropmenu li{
position: relative;
list-style: none;
float: left;
margin: 0px;
padding: 0px;
}
.dropmenu li a{
height: 22px;
padding: 9px 30px 0px 15px;
display: block;
cursor: point;
border-right: solid 1px #4a779d;
color: #FFFFFF;
text-transform: uppercase;
text-decoration: none;
}
.dropmenu li span{
display: block;
float: right;
height: 10px;
width: 10px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguwWVZ-APY0dko64ltaf13v-REtHA15Es7fAxXJYfmOKwiaackmn5xMWyf9IYwaTsnLPDjjqCYs4TJ-VcpmBUfXJPxAOAboHKAR_dRJm_I3hkod38eaNcj25FrYqNjVim5e6yG4zXJE5c/s1600/arrow_up.png) repeat-x scroll 0 0;
position: absolute;
top: 12px;
right: 10px;
}
.dropmenu li a:hover span{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjikFDLIHzeePrq0bWyFKhzt9lFTJzJ7NFG-KxlMuJodxxE5qVx4vt_H3qIh1XG2snpa3Vpy1IQniQEBuze2p4xLQhaRr-lxImTnPbcvXYazsQIEIE1QTK2uUxb-nPIxEMX52p4ir-8Ee0/s1600/arrow_hover.png) repeat-x scroll 0 0;
}
.dropmenu li:hover ul, .dropmenu li:hover div{
display: block;
}
.dropmenu ul{
position: absolute;
display: none;
width: 140px;
padding: 0px;
margin: 0px;
border-bottom: 1px solid #ccc;
background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyjEHehTmcsceUmPDzs1mV1bupl3LHzjSHold3Wal-2tcjyFax2jv-G0Xuzi8InpAHlr3keD5mYwbnC1y2xV5VaCJQsAl0Z7J6nCk82G23TXQoZiKNFzRNCFGjJU-aBtdSmoDYsFlADUw/s1600/gradient.png) repeat-x scroll 0 0;
}
.dropmenu ul li{
border: 0;
float: none;
}
.dropmenu ul a {
border: 1px solid #ccc;
border-bottom: 0;
white-space: nowrap;
display:block;
color: #0657AD;
text-decoration: underline;
text-transform: none;
}
a.selected, a:hover{
color: #0657AD !important;
background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyjEHehTmcsceUmPDzs1mV1bupl3LHzjSHold3Wal-2tcjyFax2jv-G0Xuzi8InpAHlr3keD5mYwbnC1y2xV5VaCJQsAl0Z7J6nCk82G23TXQoZiKNFzRNCFGjJU-aBtdSmoDYsFlADUw/s1600/gradient.png) repeat-x scroll 0 0;
}
a.selected span{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjikFDLIHzeePrq0bWyFKhzt9lFTJzJ7NFG-KxlMuJodxxE5qVx4vt_H3qIh1XG2snpa3Vpy1IQniQEBuze2p4xLQhaRr-lxImTnPbcvXYazsQIEIE1QTK2uUxb-nPIxEMX52p4ir-8Ee0/s1600/arrow_hover.png) repeat-x scroll 0 0;
}
.dropmenu ul a:hover {
color:#F67A00 !important;
text-decoration: none;
background-color: #F0F0F0;
background-image: none;
}
.dropmenu div ul{
position: relative;
display: block;
}
.dropmenu li div{
background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyjEHehTmcsceUmPDzs1mV1bupl3LHzjSHold3Wal-2tcjyFax2jv-G0Xuzi8InpAHlr3keD5mYwbnC1y2xV5VaCJQsAl0Z7J6nCk82G23TXQoZiKNFzRNCFGjJU-aBtdSmoDYsFlADUw/s1600/gradient.png) repeat-x scroll 0 0;
border: 1px solid #ccc;
padding: 5px;
display: none;
position: absolute;
}
.dropmenu li div ul{
border: none;
background: none;
position: relative !important;
}
.dropmenu li div a{
border: none;
border-bottom: 1px solid #ccc;
}
.dropmenu li div div{
display: block;
position: relative;
background: none;
border: none;
}
.dropmenu li div div a{
display: inline;
border: none;
color: #666;
text-decoration: underline;
padding: 0px;
margin: 0px;
text-transform: none;
}
.dropmenu li div div a:hover{
color: #000;
text-decoration: none;
}
ul.left{
float: left;
width: 145px;
}
ul.right{
float: right;
width: 145px;
}
.small{
color: #666;
font-size: 10px;
padding: 10px 5px 8px 5px !important;
display: block;
clear: both;
}
.products{
width: 300px;
padding: 15px !important;
}
.products ul{
width: 100%;
}
.products ul li{
border-bottom: 1px solid #ccc;
height: 40px;
padding: 10px 0px;
}
.products h2{
font-size: 16px;
padding: 2px 0px 3px 0px;
margin: 0px;
}
.products p{
color: #666;
font-size: 10px;
padding: 0px;
margin: 0px;
}
.products img{
float: left;
padding-right: 10px;
}
.products ul li a{
display: inline;
border: none;
color: #666;
text-decoration: underline;
padding: 0px;
margin: 0px;
text-transform: none;
}
.products ul li a:hover{
color: #000 !important;
text-decoration: none;
background: none !important;
}
.tutorials{
width: 300px;
}
input{
border:1px solid #000000;
padding: 3px 8px;
margin-bottom: 8px;
width: 164px;
}
label{
padding: 0px 0px 4px 0px;
display:block;
}
button{
background: #4A779D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5191EpSacL4n7e-upBqiSMuIFDWii7z09-wpT592v9BMkJfWzBnps0DdypZic-ilDGyabEQxcMvMRB2Wo_enZgas13Ls-Dv_K2NeFC5OBKjvTkf8hYxJhlgq3n-_V1g_4pceqYVw1oLo/s1600/navigation.png) repeat-x scroll 0 0;
color: #FFF;
border:1px solid #000000;
padding: 4px 10px;
width: 180px;
}
.emailupdatesform{margin: 10px 0 5px 5px; width: 180px; float: left;}
.emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 160px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}.emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: none; font:bold 12px arial; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}

kemudian cari kode </head> dan letakan kode di bawah ini tepat di atas kode </head>

<script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery.js"></script>
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/dropdown.js"></script>
<script>
$(document).ready(function(){
$("#nav-one").dropmenu();
});
</script>

Jika sudah cari kode :: <div id='header-wrapper'>
Jika sudah ketemu paste kan kode di bawah ini tepat di atas <div id='header-wrapper'>

<ul id="nav-one" class="dropmenu">
<li>
<a href="LINK_HERE">Home</a> </li><li>
    <a href="LINK_HERE">MENU 1</a><ul>
        <li><a href="LINK_HERE">dropdown 1</a></li>
<li><a href="LINK_HERE">dropdown 2</a></li>
<li><a href="LINK_HERE">dropdown 3</a></li>
<li><a href="LINK_HERE">dropdown 4</a></li>
</ul>
</li>
<li>
    <a href="LINK_HERE">MENU 2</a><ul>
       <li><a href="LINK_HERE">dropdown1</a></li>
       <li><a href="LINK_HERE">dropdown2</a></li>
       <li><a href="LINK_HERE">dropdown3</a></li>
</ul>
</li>
<li>
<a href="LINK_HERE">MENU 1</a>
<div class="tutorials">
<ul class="left">
    <li><a href="LINK_HERE">dropdown1</a></li>
    <li><a href="LINK_HERE">dropdown2</a></li>
    <li><a href="LINK_HERE">dropdown3</a></li>
    <li><a href="LINK_HERE">dropdown4</a></li>
</ul>
<ul class="right">
    <li><a href="LINK_HERE">dropdown5</a></li>
    <li><a href="LINK_HERE">dropdown6</a></li>
    <li><a href="LINK_HERE">dropdown7</a></li>
    <li><a href="LINK_HERE">dropdown8</a></li>
</ul>

<div class="small">View<a href="LINK_HERE">MENU 2</a> or a <a href="LINK_HERE">lisT</a>.</div>
</div>
</li>
<li>
<a href="LINK_HERE">MENU 1</a>
<div class="tutorials">
<ul class="left">
    <li><a href="LINK_HERE">dropdown1</a></li>
    <li><a href="LINK_HERE">dropdown2</a></li>
    <li><a href="LINK_HERE">dropdown3</a></li>
    <li><a href="LINK_HERE">dropdown4</a></li>
</ul>
<ul class="right">
    <li><a href="LINK_HERE">dropdown5</a></li>
    <li><a href="LINK_HERE">dropdown6</a></li>
    <li><a href="LINK_HERE">dropdown7</a></li>
    <li><a href="LINK_HERE">dropdown8</a></li>
</ul>

<div class="small">View<a href="LINK_HERE">MENU 2</a> or a <a href="LINK_HERE">lisT</a>.</div>
</div>
</li>
<li>
<a href="LINK_HERE">MENU 2</a> <ul>
    <li><a href="LINK_HERE">dropdown1</a></li>
    <li><a href="LINK_HERE">dropdown2</a></li>
    <li><a href="LINK_HERE">dropdown3</a></li>
    <li><a href="LINK_HERE">dropdown4</a></li>
    <li><a href="LINK_HERE">dropdown5</a></li>
    <li><a href="LINK_HERE">dropdown6</a></li>
    <li><a href="LINK_HERE">dropdown7</a></li>
    <li><a href="LINK_HERE">dropdown8</a></li>
</ul>
</li>
<li> <a href="LINK_HERE">MENU 4</a>
<div class="emailsub">
        <div class="emailupdatesform">
        <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=www.x-gudangdownload', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" /><input value="tntbystc" name="uri" type="hidden" /><input value="Submit" class="joinemailupdates" type="submit" /></form></div></div>
</li>    </ul>
kemudian save template..tapi bisa di pratinjau dulu...

sumber code :: bocah poris

||selesai||

zero - x - download

Cara membuat Menu DropDown

Tidak ada komentar:

Posting Komentar

blogroll 2

BLOGROLL

TRANSLITE

Arsip Blog

Label

Entri Populer