Thursday 18 April 2013

Cara membuat menu DROPDOWN

Membuat menu dropdown memang sedikit rumit,tapi jika kita memang benar-benar teliti,kerumitan itu dapat teratasi.

Sebagai contoh,lihat lah menu diatas.

Langsung saja ke cara-cara nya,karena sedikit panjang.
  • Masuk ke blog anda.
  • Masuk ke template.
  • Klik edit HTML.
  • Lalu cari kode ini ]]></b:skin> ,lalu seteleh ketemu letakan kode ini tepat diatas ]]></b:skin>. 
#DropdownMenu {

    background:#FFFFFF;

border-radius:6px;

    width: 940px;

    height: 15px;

    font-size: 12px;

    font-family: Arial, Tahoma, Verdana;

    color:#0000FF;

    font-weight: bold;

    margin-bottom: 30px;

    padding: 0px;



}

#Dropdownbox {

    width: 940px;

border-radius:6px;

    float: left;

    margin: 0;

    padding: 0;

}


#strike {

border-radius:6px;

    margin: ;

    padding: 0;

}

#strike ul {

border-radius:6px;

    float: left;

    list-style: none;

    margin: 0;

    padding: 0;

}

#strike li {

border-radius:6px;

    list-style: none;

    margin: 0;

    padding: 0;

}

#strike li a, #strike li a:link, #strike li a:visited {

border-radius:6px;

    color:#0000FF;

    display: block;

    font-size: 16px;

    font-family: Georgia, Times New Roman;

    font-weight: normal;

    margin: 0;

    padding: 9px 15px 8px;

}

#strike li a:hover, #strike li a:active {

border-radius:6px;

    background:#00FFFF;

    color:#0000FF;

    margin: 0;

    padding: 9px 15px 8px;

    text-decoration: none;

}

#strike li li a, #strike li li a:link, #strike li li a:visited {

border-radius:6px;

      background:#C0C0C0;

    width: 150px;

    color:#0000FF;

    font-size: 14px;

    font-family: Georgia, Times New Roman;

    font-weight: normal;

    float: none;

    margin: 0;

    padding: 7px 10px;

    border-bottom: 1px solid #FFF;

    border-left: 1px solid #FFF;

    border-right: 1px solid #FFF;

}

#strike li li a:hover, #strike li li a:active {

border-radius:6px;

     background:#C0C0C0;

    color:#0000ff;

    padding: 7px 10px;

}

#strike li {

border-radius:6px;

    float: left;

    padding: 0;

}

#strike li ul {

border-radius:6px;

    z-index: 9999;

    position: absolute;

    left: -999em;

    height: auto;

    width: 170px;

    margin: 0;

    padding: 0;

}

#strike li ul a {

border-radius:6px;

    width: 140px;

}

#strike li ul ul {

border-radius:6px;

    margin: -32px 0 0 171px;

}

#strike li:hover ul ul, #strike li:hover ul ul ul, #strike li.sfhover ul ul, #strike li.sfhover ul ul ul {

border-radius:6px;

    left: auto;

}

#strike li:hover ul, #strike li li:hover ul, #strike li li li:hover ul, #strike li.sfhover ul, #strike li li.sfhover ul, #strike li li li.sfhover ul {

border-radius:6px;

    left: auto;

}

#strike li:hover, #strike li.sfhover {

border-radius:6px;

    position: static;

}



Untuk yang berwarbna merah adalah kode warnanya,silahkan ganti sesuai keinginan.

  • Lalu klik simpan template.
Langkah yang kedua anda tinggal pergi ke tata letak atau layout,dan klik add gadget.
Lalu pilih tambahkan HTML / javascript dan masukan kode dibawah ini.

<div id="DropdownMenu">
       <div id="Dropdownbox">
      <ul id="strike">
        <li><a href=" http://finger21.blogspot.com/2013/03/beranda.html ">Home</a></li>
         <li><a href=" http://finger21.blogspot.com/2013/02/kontak.html ">Kontak</a></li>
        <li>
          <a href="#">Kategori</a>
          <ul>
            <li>
              <a href=" http://finger21.blogspot.com/search/label/TIPS ">Tips</a></li>
            <li><a href=" http://finger21.blogspot.com/search/label/Facebook ">Facebook</a></li>
            <li><a href=" http://finger21.blogspot.com/search/label/Sejarah ">Sejarah</a></li>
                                                                                                       
          </ul>
        </li>
        <li><a href=" http://finger21.blogspot.com/search/label/Software ">Software</a></li>
      </ul>
    </div>
  </div>




Untuk yang berwarna merah adalah contohnya,silahkan ganti sesuai keinginan anda.

0 comments:

Post a Comment