Cara Membuat Menu Drop Down yang Keren dengan Menu Search

bagi sobat sobat yang sedang mencari artikel cara Membuat Menu Drop Down yang keren atau mencari cara membuat Menu Horizontal yang keren sobat tidak salah tempat karena sekarang saya akan share sedikit ilmu kepada sobat blogger, menu ini memang bukan buatan saya, tapi sudah saya modifikasi sedikit semoga sobat sobat senang dengan menu ini, sebelum ke cara pembuatan nya ada baik nya kalau sobat-sobat melihat tampilan hasil nya lihat gambar di bawah ini sebagai tampilan hasil nya

setelah melihat gambar ternyata tidak tertarik, ya maaf deh, agan boleh cari Artikel yang lain nya DISINI, jika tertarik ayo kita mulai cara pembuatan nya langkah nya sbb :

Pertama tama sopasti kita harus login ke blog
setelah login masuk ke menu Template setelah itu Centang Expand Template Widget dan cari Code
setelah dapat copy code di bawah ini tepat di atas code yang tadi kita cari ]]></b:skin>

/* Menu Horizontal Dropdown
----------------------------------------------- */

#menu
{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #111;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);

background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}
#menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
}
#menu a
{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a
{

color:#fff; text-decoration:line-through;
}
*html #menu li a:hover /* IE6 */
{
color:#fff; text-decoration:line-through;
}
#menu li:hover > ul
{
display: block;
}
/* Sub-menu */
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu ul ul
{
top: 0;
left: 150px;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a
{
padding: 10px;
height: 10px;
width: 130px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
}
#menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
#menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}

#menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

#search{ width:220px; float:right; margin:0px 5px 0px 5px; align:center;
}
#search input[type="text"] {height:24px; line-height:29px; background: url(http://3.bp.blogspot.com/-qcqxuwepuw8/T7Ts0Iso9VI/AAAAAAAAAkg/oGskZqNwrZY/s1600/search_icon.gif) no-repeat 8px 1px #fff; border: 0 none; font: bold 12px; color: #333; width: 172px; padding: 0 15px 0 32px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; border:1px solid #eee; -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3) , inset 0px 1px 3px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3) , inset 0px 1px 3px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3) , inset 0px 1px 3px rgba(0, 0, 0, 0.2); -webkit-transition: all 0.7s ease 0 s; -moz-transition: all 0.7s ease 0s; -o-transition: all 0.7s ease 0s; transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus { width: 172px;
}
/* tutup Menu Horizontal Dropdown
----------------------------------------------- */
setelah itu save template dan pergi ke menu Tata Letak atau Layout dan Add Gedget Javascript lalu copy code di bawah ini

<ul id='menu'>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://yudhacomunity.blogspot.com/2012/02/link-blog-sahabat.html'>link exchange</a></li>
<li><a href='#'>IT Knowledge</a>
<ul>
<li><a href='http://yudhacomunity.blogspot.com/search/label/hacking'>Hacking</a></li>
<li><a href='http://yudhacomunity.blogspot.com/search/label/programing'>Programing</a></li>
<li><a href='http://yudhacomunity.blogspot.com/search/label/jaringan'>Networking</a></li>

</ul>
</li>
<li><a href='http://yudhacomunity.blogspot.com/2011/08/cara-update-status-via-terserah-kita.html'>Update Status Via</a> </li>
<li><a href='#'>Blogger Tips</a>
<ul>
<li><a href='http://yudhacomunity.blogspot.com/search/label/Cara%20membuat%20website'>Making a Website</a></li>
<li><a href='http://yudhacomunity.blogspot.com/search/label/Domain'>Domain</a></li>
<li><a href='http://yudhacomunity.blogspot.com/search/label/kontes%20blog'>Kontes Blog</a></li>
</ul>
</li>
<form action='/search' id='search' method='get'> <input name='q' placeholder='Search...' size='40' type='text'/> </form>
</ul>