Menu Drop Down: Cara Membuat Menu Drop Down 1

Cara Membuat Menu Dropdown - Menu dropdown memang sangat diperlukan sebagai media informasi sebagaimana halnya widget, yang dalam fungsinya jika blog terdapat menu pilihan maka, pengunjung dapat memilih apa yang akan pengunjung inginkan. sedangkan dropdown pada menu digunakan untuk menghemat tempat sekaligus mengkategorikan menu yang masih berhubungan. Untuk memasang menu dropdown tersebut silahkan ikuti langkah-langkah membuat menu dropdown berikut ini :

Silahkan masuk ke dasbor blog anda.
Klik panah kebawah seperti pada gambar yang diberi kotak merah :

Kemudian Pilih >> Template

Dilanjutkan dengan klik >> Edit HTML >> Proceed / lanjutkan
Setelah masuk ke jendela Edit Html kemudian silahkan cari kode ]]></b:skin> dengan cara klik Ctrl + F pada keyboard Komputer anda kemudian masukkan kode tersebut.
Setelah ketemu silahkan pasang kode berikut ini tepat diatas kode ]]></b:skin>

ul.dropmenu{
position: relative;
margin: 0px;
padding: 1px 0px 0px 0px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBAHGTSXFDw0R-xJXdEaSOMxZ95u8-7JRlsSRUc3nzVIz1UKLU5ZFKwlda1DiDyOHxOWUqByMJOmYFmmrXetQKTJqMJ78hN3xpfMN3d9HqGPy5NYV-ewItXApEvfOHHMV_dxgAAJS1LDA/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/AVvXsEgA1JYrtmc8qG4VwYFP49e8ssEKsT2b52e9c9-2COi34d6c6kMO3v5SX3-VNF9wwsUj68aGZZ4EjhJGXDgJ-wmeAo12xFU7kiaFS9WAzBORqCWEnOwERGnlsUcorRIlP0uY-ZOwpx_N88w/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/AVvXsEjAYh5dEJYQ9OOk50NdRzcqD_TfEQxhCAnNpCDal8IL1U7n7266BexEmsMVAEf43D3cds60uR3gx_EPzRDUdZyvXTuaXlL5V9yTEIwk02zBxFvFdzwmMrG37QsHT5_tNlO97pymHk65oSs/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/AVvXsEjX7YmOPQLnDwGaJYotRC5VMUImAmszEPYRZL50-srU2_NLn4A6dtjYaC7u-TBOknF5RKAfyVXKngasdx3Uabwtgxj8PW1g6jw7DWw6dm-FSDiLwAW710IjyZaJcPcxuE5YtXfhXAt95z4/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/AVvXsEjX7YmOPQLnDwGaJYotRC5VMUImAmszEPYRZL50-srU2_NLn4A6dtjYaC7u-TBOknF5RKAfyVXKngasdx3Uabwtgxj8PW1g6jw7DWw6dm-FSDiLwAW710IjyZaJcPcxuE5YtXfhXAt95z4/s1600/gradient.png) repeat-x scroll 0 0;
}
a.selected span{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAYh5dEJYQ9OOk50NdRzcqD_TfEQxhCAnNpCDal8IL1U7n7266BexEmsMVAEf43D3cds60uR3gx_EPzRDUdZyvXTuaXlL5V9yTEIwk02zBxFvFdzwmMrG37QsHT5_tNlO97pymHk65oSs/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/AVvXsEjX7YmOPQLnDwGaJYotRC5VMUImAmszEPYRZL50-srU2_NLn4A6dtjYaC7u-TBOknF5RKAfyVXKngasdx3Uabwtgxj8PW1g6jw7DWw6dm-FSDiLwAW710IjyZaJcPcxuE5YtXfhXAt95z4/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 #4A779D;
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/AVvXsEjBAHGTSXFDw0R-xJXdEaSOMxZ95u8-7JRlsSRUc3nzVIz1UKLU5ZFKwlda1DiDyOHxOWUqByMJOmYFmmrXetQKTJqMJ78hN3xpfMN3d9HqGPy5NYV-ewItXApEvfOHHMV_dxgAAJS1LDA/s1600/navigation.png) repeat-x scroll 0 0;
color: #FFF;
border:1px solid #4A779D;
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;}

Setelah terpasang silahkan di save dulu
Kemudian cari kembali kode </head> dengan menggunakan Ctrl + F seperti diatas.
Setelah ketemu dilahkan pasang kode berikut ini tepat diatas kode </head> :

Kemudian cari kode <div id='header-wrapper'> dengan menggunakan Ctrl + F, Update jika tidak menemukan kode diatas silahkan cari kode berikut <div class='header-outer'>.
Pasang kode berikut tepat tiatas kode <div id='header-wrapper'> atau <div class='header-outer'> :

<ul id="nav-one" class="dropmenu">
<li>
<a href="#">Home</a> </li><li>
<a href="#">Forum</a><ul>
<li><a href="#">Support</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Examples</a></li>
<li><a href="#">Your work</a></li>
</ul>
</li>
<li>
<a href="#item3">Downloads</a><ul>
<li><a href="#">Tools</a></li>
<li><a href="#">Office</a></li>
<li><a href="#">Custom projects</a></li>
</ul>
</li>
<li>
<a href="#">Products</a>
<div class="products">
<ul>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpDdwL1xjdtipOw7RRzZPGWNQcamaD7CmcroZWieBx4Mj6VA0WzGjNUAQGdqZM1RuZbsAyqEHqWQ9JfsTdY9gDMxg-YgCYy6B8E7t1mqkUDvNkE_55Igl7xBXJGXYtzrqT2duyJE1ur3M/s1600/1.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Featured Box</h2><p><a href="#">More information about this product</a></p></li>

<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir4ecRMrVSsmyxojBzPzfwcEqvHaO6tfZd_xMWkzm869CGYGnIatnvieix1_6kTQjFYpco4Gg-gV1v1VJJOoK29iknlER2YiKF66YkHpnRSvI9I3OyMxbZfDifz8_4Tkqbl1e9XX7s7CU/s1600/2.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Mod Rewriter</h2><p><a href="#">More information about this product</a></p></li>

<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg38cNPkK8KAzaV8iAmjWfvMhPJjpcJuJ3fyhxlMqRl0r27IFNrOuBi8BT5Xfk3llMY4Np_1bjOEBAQwm7oYz5hcKkUWpYYhWgGiZge8qhVy_MOkAAGXI4Dn2Z0xp52zFEKGZLR4IVspEE/s1600/3.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Byte Scrambler</h2><p><a href="#">More information about this product</a></p></li>

<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg38cNPkK8KAzaV8iAmjWfvMhPJjpcJuJ3fyhxlMqRl0r27IFNrOuBi8BT5Xfk3llMY4Np_1bjOEBAQwm7oYz5hcKkUWpYYhWgGiZge8qhVy_MOkAAGXI4Dn2Z0xp52zFEKGZLR4IVspEE/s1600/3.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Image Processor</h2><p><a href="#">More information about this product</a></p></li>

<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjueLinGkz-e1UsS_jzpPC0dIXKJZuUXZhK5Y4yR7tCQgFbU_Oy3NQh2NTDgjxFh5hCz7BAZYSkOWYpRSNjRiKKd8bF7oHwiywSovxQomgAm7vw68A2ZQVuB_Jh8oDO0lMuMfog_qnAtiU/s1600/5.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Registry Class</h2><p><a href="#">More information about this product</a></p></li>

<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8RwbHFam0ucbSE4uEsyVnQDwsFe02xi2qyy51lMdm0vqhsx4heUscaLJzoCp8OGfKKMKwTLYhMn000kOOVOL6v99Dx-z_GJOJ3l6XhzDkrGPoVBD7EDBQnFg4tUXc4OazZC0MrKmnMaU/s1600/6.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Data Validation</h2><p><a href="#">More information about this product</a></p></li>

<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAAe3eFZOInYn1qYNkAqa3LrMFY-D5Pgq3vnxRm7Eq2fyQF0oVxgjPL1t1HPcQsGm8kroUMk2Tzi4Y9LHY9FLhyIFtdiB8X2LPIbTOy_7YBSAATSWfS4RgZXigocNojTgyLGUP6OBz0k4/s1600/7.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Ajax Tables</h2><p><a href="#">More information about this product</a></p></li>
</ul>
<div class="small">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</div>
</div>
</li>
<li>
<a href="#">Tutorials</a>
<div class="tutorials">
<ul class="left">
<li><a href="#">Javascript</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">PHP</a></li>
</ul>
<ul class="right">
<li><a href="#">HTML/CSS</a></li>
<li><a href="#">ASP.NET</a></li>
<li><a href="#">Actionscript</a></li>
</ul>

<div class="small">View <a href="#">all categories</a> or a <a href="#">list of the best tutorials</a>.</div>
</div>
</li>
<li>
<a href="#">Links</a> <ul>
<li><a href="#">Programming</a></li>
<li><a href="#">Inspiration</a></li>
<li><a href="#">My websites</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Cool stuff</a></li>
<li><a href="#">Sitebase</a></li>
<li><a href="#">Other</a></li>
</ul>
</li>
<li>
<a href="#">Subscribe Now</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=NAMABLOGANDA', '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>

Setelah langkah diatas selesai, anda bisa mengubah link dan nama menu pada kode berwarna merah diatas.
Kemudian silahkan di save semua pengaturan anda.

Semoga dengan penjelasan lebih rinci maka sahabat Newbe juga bisa memahami dan mempraktekkan dengan benar.

Gambar :