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... 

Tweet