Cara Buat Menu Dropdown

Cara Buat Menu Dropdown -










  • Masuk dulu ke Blogger >> klik Tata Letak >> Edit HTML. 
  • Backup dulu template anda. caranya pasti sudah taulah.. >> Download Template Lengkap 
  • Cari Code :
    ]]></b:skin>
     
  • Copy paste code di bawah ini tepat di atasnya

    /* Navigasi Dropdown Menu */
          #navdropdownmenu{
          background:black; /*Warna Latar Belakang */
          width:100%;
          height:auto;
          margin:0;
          padding:0;
          }
          #navdropdownmenu ul{
          float:left;
          list-style:none;
          margin:0;
          padding:0;
          }
          #navdropdownmenu li{
          list-style:none;
          float:left;
          }
          #navdropdownmenu li a, #navdropdownmenu li a:link, #navdropdownmenu li a:visited{
          color:yellow; /* Warna Teks */
          display:block;
          padding:9px 10px 9px 10px;
          font-size: 12px; /* Ukuran Teks */
          font-family: verdana; /* Jenis font */
          text-decoration:none;
          }
          #navdropdownmenu li a:hover{
          background:yellow; /* Warna latar saat kursor mouse berada di atasnya (hover) */
          color:black; /* Warna teks saat kursor mouse berada di atasnya */
          padding:9px 10px 9px 10px;
          }
          #navdropdownmenu li ul{
          z-index:10;
          position:absolute;
          height:auto;
          width:200px; /* Lebar submenu */
          border-width:1px 0 0 0; /* Tebal garis pinggir submenu */
          border-style:solid;
          border-color:#ffff66; /* Warna garis pinggir submenu */
          }
          #navdropdownmenu li ul li a, #navdropdownmenu li ul li a:link, #navdropdownmenu li ul li a:visited{
          float:none;
          background:black; /* Warna latar belakang submenu */
          width:200px; /* Lebar submenu. Isi dengan nilai yang sama */
          border-width:0 1px 1px 1px; /* Tebal garis pinggir submenu */
          border-style:solid;
          border-color:#ffff66; /* Warna garis pinggir submenu */
          }
          #navdropdownmenu li ul li a:hover{
          background:yellow; /* Latar belakang submenu ketika kursor mouse berada di atasnya */
          color:black; /* Warna teks submenu ketika kursor mouse berada di atasnya */
          }
          #navdropdownmenu li:hover ul, #navdropdownmenu li a:hover ul#submenu, #navdropdownmenu li:hover a:hover ul#submenu{
          z-index:10;
          position:absolute;
          height:auto;
          width:200px; /* Lebar submenu */
          left:auto;
          }
          .ngumpet{
          display:none;
          }
          .muncul{
          display:block;
          }
  • Cari kode berikut

    </head>
     
  • Ketikkan code berikut diatasnya

    <script>
          var auahgelap = &#39;&#39;;
          function petakumpet(id)
          {
          var menu = document.getElementById(id);
          var sangmantan = menu.className;
          if (sangmantan == &#39;ngumpet&#39;) {
          if (auahgelap != &#39;&#39;) {
          var terlalu = document.getElementById(auahgelap);
          terlalu.className = &#39;ngumpet&#39;;
          }
          menu.className = &#39;muncul&#39;;
          auahgelap = id;
          } else {
          menu.className = &#39;ngumpet&#39;;
          }
          }
          function umpetpetak(id)
          {
          var menu = document.getElementById(id);
          var sangmantan = menu.className;
          if (sangmantan != &#39;ngumpet&#39;) {
          if (auahgelap == &#39;&#39;) {
          var terlalu = document.getElementById(auahgelap);
          terlalu.className = &#39;muncul&#39;;
          }
          menu.className = &#39;ngumpet&#39;;
          auahgelap = id;
          } else {
          menu.className = &#39;muncul&#39;;
          }
          }
          </script>

     
  • Cari kode yang mirip kode berikut.

    <div id='header-wrapper'>
          <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
          <b:widget id='Header1' locked='true' title='(Judul Blog Anda) (Header)' type='Header'/>
          </b:section>
          </div>

     
  • Dibawahnya, ketikkan kode berikut:

    <div id='navdropdownmenu'>
          <ul id='navdropdownmenu'>
          <li><a href='#'>Home</a></li>
          <li onmouseout='petakumpet(&quot;submenu1&quot;)' onmouseover='umpetpetak(&quot;submenu1&quot;)'><a href='#'>Software PC</a>
          <div class='ngumpet' id='submenu1'>
          <ul>
          <li><a href='#'>Application</a></li>
          <li><a href='#'>Anti Virus</a></li>
          <li><a href='#'>Internet Browser</a></li>
          <li><a href='#'>Utility</a></li>
          <li><a href='#'>Themes</a></li>
          <li><a href='#'>Desktop</a></li>
          <li><a href='#'>Games</a></li>
          <li><a href='#'>Hack Tools</a></li>
          </ul>
          </div>
          </li>
          <li onmouseout='petakumpet(&quot;submenu2&quot;)' onmouseover='umpetpetak(&quot;submenu2&quot;)'><a href='#'>Mobile Software</a>
          <div class='ngumpet' id='submenu2'>
          <ul>
          <li><a href='#'>Application</a></li>
          <li><a href='#'>Games</a></li>
          <li><a href='#'>Themes</a></li>
          <li><a href='#'>Anti Virus</a></li>
          </ul>
          </div>
          </li>
          <li onmouseout='petakumpet(&quot;submenu3&quot;)' onmouseover='umpetpetak(&quot;submenu3&quot;)'><a href='#'>Tips And Tricks</a>
          <div class='ngumpet' id='submenu3'>
          <ul>
          <li><a href='#'>Blogger</a></li>
          <li><a href='#'>Tutorials</a></li>
          <li><a href='#'>Computers</a></li>
          </ul>
          </div>
          </li>
          <li onmouseout='petakumpet(&quot;submenu4&quot;)' onmouseover='umpetpetak(&quot;submenu4&quot;)'><a href='#'>Music</a>
          <div class='ngumpet' id='submenu4'>
          <ul>
          <li><a href='#'>Indo Hits</a></li>
          <li><a href='#'>Rock</a></li>
          </ul>
          </div>
          </li>
          <li><a href='#'>News Update</a></li>
          </ul>
          </div>



    Keterangan:
          * Tanda # pada kode <a href='#'> adalah link. Ganti dengan URL yang diinginkan
          * Anda bisa menambah atau mengurangi menu diatas.

     
Lalu klik >> Simpan Template

Semoga bermanfaat...
god luck... 

12 Responses to "Cara Buat Menu Dropdown"

  1. Teeima kasih ilmunya, selalu ada ilmu baru nieh disini :)

    BalasHapus
  2. thanks ya gan udah berkunjung.......

    BalasHapus
  3. codingnya gak kurang panjang tu gan???

    BalasHapus
  4. maksih gan Sudah saya pasang di blog saya tuh menu gan
    keren gan
    gan bisa di ganti warnanya gak gan

    BalasHapus
  5. thanks ya udah berkunjung..........

    BalasHapus
  6. bermanfaat segara di coba sob..,
    untuk backroundnya sob bisa diganti harus nyari kode apa ?

    BalasHapus
  7. nyari kode ini gan background:black; /*Warna Latar Belakang */

    BalasHapus
  8. Bro CSS dasar untuk membuat dropdown itu apa yha..apakah harus di tambah hover,position,float ataukah yg lainnya..soalnya saya cuman butuh dropdownnya saja..jadi tampilan menunya tetep seperti yg ada di blg saya,,saya hanya ingin menambah dropdown saja tolong di bantu yha.

    BalasHapus
  9. ini gan

    nav.drop-menu {
    position:relative;
    padding:10px 15px;
    background:#6D92A5;
    width:200px;
    font:bold 12px Arial,Sans-Serif;
    text-transform:uppercase;
    color:#eee;
    }

    nav.drop-menu:after {
    content:"";
    width:0px;
    height:0px;
    border:5px solid transparent;
    border-top-color:#fff;
    position:absolute;
    top:16px;
    right:14px;
    }

    BalasHapus

Jangan Menulis Komentar Mengandung
SPAM, SARA, P*RNO Atau KATA KASAR..!!