Tutorial : Dropdown Menu

Alhamdulillah selamat sampai ke hostel sebentar tadi . Abg teksi I handsome u . Umo pon baru 25 . Muda kan ? Hehehe. 
Dah dah . Itu masuk mood menggedik . Tak baik Takbaik . Hehe . Okay siyes time okay.
Ada yang request dengan Cikk Mira aka sy tentang tuto . Tuto navigation bar bergabung dengan widget search . Yang nih siap ada dropdown lagi tau :P

sila tekan untuk ianya membesar yekkk ^^v

So let's proceed \(^_^)/
Steps

1. Pegi ke Dashboard > Template > Edit template
2. search code nih ]]>
3. Dah jumpa ? Then copy code bawah nih ek

#menujohanes{ width: 898px; margin: auto; background: #fff; height: 50px; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; text-transform: uppercase; position: relative; border-left: 5px solid #FCD4DC; border-right: 5px solid #FCD4DC; border-bottom: 1px solid #ddd; border-top: 1px solid #ccc;} #menujohanes ul{ list-style-type: none; z-index: 9; width: 1000px; margin: auto;} #menujohanes ul li{ float: left; position: relative; padding: 12px; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} #menujohanes ul li:hover a.menu{color:#fff;} #menujohanes ul li:hover{ background: #D7F6B0 repeat top center; box-shadow: 0px 3px 0px rgba(0,0,0,0.2);} #menujohanes ul li a:hover { color:#fafafa;} #menujohanes ul li a{ color: #666; padding: 0 10px; line-height:25px; font-size:11px; display:block; text-decoration:none; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; text-shadow: 0px 2px 0px rgba(0,0,0,0.1);} #menujohanes ul li ul li{float: none;position: relative;} #menujohanes ul li ul{ position: absolute; top:49px; left:0; display: none; box-shadow: inset 0 4px 3px rgba(0, 0, 0, 0.3), 0 1px 0 #ddd,0 5px 10px rgba(0, 0, 0, 0.2); width:150px; border-radius: 0px 0px 5px 5px; background: #fff;} #menujohanes ul li:hover > ul{display: block;} #menujohanes ul li ul li a{line-height:25px;} #menujohanes ul li ul li ul{ position: absolute; top:0; left:150px; display: none; box-shadow:0 1px 0 #ddd,0 5px 10px rgba(0, 0, 0, 0.2); border-radius:5px; width:150px; background: #fff;} #menujohanes ul li.selected{color: #000;border-right: 1px solid #FCD4DC;} #search input[type="text"]:hover {width:160px;} #search input[type="text"] { background: #FAFAFA url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrEa6bSnLTl4b9nrQfi6XeZ5gYOlzwTuAA_hNdY3vtfIiog4pOhDrkwJS1b43wP-mog-1yT1tE2po4rcHjeD2Q973_wf6okILu7awu8PNOEz2iObq4vxSV_8MSrEJHH0_ljFSvxRlnsNA/s1600/SEARCH_32x32-32.png")no-repeat center left; font-size: 12px; background-position-y: 10px; color: #222; width: 0px; padding: 11px 0px 7px 35px; z-index: 9; border: 1px solid #FAFAFA; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; margin-bottom: -1px; position: absolute; top: 0px; right: 0px; border-left: 1px solid #ddd; height: 30px;}

4. Paste code atas nih atas code ]]>
5. Cari code
   , untuk pengguna denim template
   
6. Dah ? Sekarang copy code bawah nih pulak ye.

<div id='menujohanes'>

<ul>

 <li class='selected'><a href='LINK ANDA' title='Home'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBFLRsgM46vQrM_8o8iseuaW0v6_EbI1m9DKnnVg4hGcVi82CF4giKVG6X-Om1J4ByzhN_zB3hHSGjXIzm19Fg-qtpnGZ6MS2SKSGnpp3SVpaaFoSDl0y-L5ozeJKBbtt7au5bfnp8bow/s1600/home_white.png' style='padding:0px;'/> Home</a></li>

<li><a class='menu' href='LINK ANDA'>Dashboard</a></li> 

<li><a class='menu' href='#'>About me</a> <ul>

 <li><a href='LINK ANDA' target='new' title='SIAPA SAYA?'>Owner Blog</a></li>

 <li><a href='LINK ANDA' target='new' title='Insan tersayang'>Me Family</a></li> 

<li><a href='#'>Contact me</a> <ul> 

<li><a href='LINK ANDA' target='new'> Twitter</a></li> 

<li><a href='LINK ANDA' target='new'> Fanpage</a></li> 

<li><a href='LINK ANDA' target='new'> Facebook</a></li> 

</ul>

 </li> 

</ul> 

</li>

 <li><a class='menu' href='#'>Service editing blog</a> <ul>

 <li><a href='LINK ANDA' title='my creation'>Own Portfolio</a></li> 

<li class='hr'></li> <li><a href='LINK ANDA' title='Tempah servis saya'>My service</a></li> 

<li class='hr'></li> <li><a href='LINK ANDA' title='portfolio'>My design</a></li> 

<li class='hr'></li> <li><a href='LINK ANDA' title='ikot pakej'>Contoh Pakej</a></li> 

</ul>

 </li> 

<li><a class='menu' href='#'>Exchange</a> <ul> 

<li><a href='LINK ANDA' target='new'>Links</a></li> 

<li><a href='LINK ANDA' target='new'> Banner</a></li> 

</ul> 

</li> 

<li><a href='LINK ANDA' target='new'>Tutobies</a></li>

 <li><a href='LINK ANDA' target='new'>Blogshop</a></li> 

</ul>   <form action='/search' id='search' method='get'> <input name='q' placeholder='Search Somethings..' size='40' type='text'/></form> </div>

7. Code yang atas nih korang paste bawah code , untuk pengguna denim template
   
8. Dah siap >.< Huu . Preview dlu tau :)

NOTA KAKI

Merah : Tajuk

BIRU : Warna

PURPLE : Warna border

LINK ANDA : ur link 

#yang berwarna sahaja boleh ditukar 

SELAMAT MENCUBA

If ada masalah dengan tuto nih do roger2 me yea . Klik my nufnang boleh ? Ahaks >.<