Nice to meet you!

Extraordinary claims require extraordinary evidence cosmic fugue galaxies, culture tingling of the spine, courage of our questions. Across the centuries the only home we've ever known!
discover more
Maeve

What Read Next

05 Nov 13

Tutorial : Dropdown Menu

tutorial







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


    4. #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.
      7. <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>
      1. Code yang atas nih korang paste bawah code , untuk pengguna denim template
      2. 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 >.<






      tutorial
      F

      Comments

      1. najiahsNovember 5, 2013 at 8:55 PM

        perkongsian yang menarik:)

        ReplyDelete
      2. UnknownNovember 5, 2013 at 9:25 PM

        dah bookmark, nanti nak buat senang nak cari..
        thanks for the tuto.. hihi.. :D

        ReplyDelete
      3. Fiza AizzawaNovember 6, 2013 at 10:19 AM

        mmg tgh cari koding nie.. nk try buat bila ada masa. terima kasih kongsikan

        ReplyDelete
      4. AnonymousNovember 6, 2013 at 12:49 PM

        comel comel :D
        http://snapanyway.blogspot.com/

        ReplyDelete
      5. NajlaNovember 9, 2013 at 7:14 PM

        Tq bagi link yg version pertama tuu. Baru je nak buat tapi tetiba kak mira ada update version 2 so saya pun apa lagi, nak gunalah tutorial ni :) Cantik sangat!

        Thank you khamsamnida Arigatou! hehee

        ReplyDelete
      6. aishahNovember 12, 2013 at 8:20 AM

        Thanks awak ^o^

        ReplyDelete

      Post a Comment

      Hey ! Jangan Lupa Tinggalkan Komen Tau ♥

      Contact Form

      Name

      Email *

      Message *