Cara membuat menu drop down di Blogger

Selamat malam sobat pengunjung Me-Permana Blog , Sesuai judulnya kali ini saya ingin berbagi trik atau tutorial tentang Cara membuat menu drop down di Blogger. Oke yuk langsung ke bahasan kita..
Apa itu Menu drop down? Lihat gambar ini!

Oke sekarang udah tau kan apa itu Menu drop down? Yuk langsung ke TKP Cara membuat menu drop down di Blogger. 

1. Login ke Blogger.
2. Klik Tata Letak/Page Elements Lalu pilih Tambah gadget/Add a gadget tepat dibawah header blog anda. Seperti ini : 

    

    3.  Kemudian anda pilih HTML/JavaScript.

    4.  Lalu masukkan kode script berikut ini ke dalam HTML/JavaScript yang tadi kamu buat.
       
<div id='mbtnavbar'>
      <ul id='mbtnav'>
        <li>
          <a href='#'>Home</a>
        </li>
        <li>
          <a href='#'>About</a>
       </li>
        <li>
          <a href='#'>Contact</a>
        </li>
  <li>
           <a href='#'>Sitemap</a>
            <ul>
                <li><a href='#'>Sub Page #1</a></li>
                <li><a href='#'>Sub Page #2</a></li>
                <li><a href='#'>Sub Page #3</a></li>
              </ul>
        </li>
      </ul>
    </div>

Ket : Ganti # dengan alamat link yang anda inginkan, lalu ganti tulisan yang berwarna HIJAU dengan nama page yang anda inginkan. Teks yang diberi background warna kuning adalah untuk drop menu. Jika ingin menambahkan Tab baru silahkan sisipkan kode berikut ini DIATAS </ul> yang berwarna merah.

<li>
          <a href='#'>Tab Name</a>
        </li>

    5.   Save gadget , lalu pergi ke Template lalu pilih Edit HTML.
    6.   Backup terlebih dahulu supaya tidak terjadi hal yang tidak diinginkan.
    7.   Lalu cari ]]></b:skin> (Gunakan Ctrl + F untuk mempermudah pencarian).
    8.   Kemudian anda masukkan kode script berikut ini DI ATAS kode ]]></b:skin> tadi, ingat DI ATAS bukan dibawah, disamping atau sebagainya.

/*----- MBT Drop Down Menu ----*/

#mbtnavbar {
    background: #060505;
    width: 960px;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #960100;
        height:35px;
}

#mbtnav {
    margin: 0;
    padding: 0;
}
#mbtnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#mbtnav li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #333;
        border-right:1px solid #333;
        height:35px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
    color: #FFF;
    display: block;
   font:normal 12px Helvetica, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
       
}
#mbtnav li a:hover, #mbtnav li a:active {
    background: #BF0100;
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;
       
   
       
}
#mbtnav li {
    float: left;
    padding: 0;
}
#mbtnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#mbtnav li ul a {
    width: 140px;
}
#mbtnav li ul ul {
    margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
    left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
    left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
    position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
    background: #BF0100;
    width: 120px;
    color: #FFF;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
   
}
#mbtnav li li a:hover, #mbtnavli li a:active {
    background: #060505;
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}


Ket : 

• Ganti #060505 untuk mengganti warna background Main menu.
• Ganti  teks yang diberi background kuning untuk mengganti warna, jenis dan ukuran font.
• Ganti #BF0100 untuk mengganti warna background tab jika diarahkan oleh mouse (mouse hover).
• Ganti #BF0100 untuk mengganti warna background menu drop down.
• Ganti #060505 untuk mengganti warna background menu drop down jika diarahkan oleh mouse (mouse hover).

   9.   Simpan template dan lihat keajaibannya !

Oke sekian aja sedikit tutorial dari saya tentang Cara membuat menu drop down di Blogger. Jika ada yang kurang dimengerti silahkan hubungi saya via email/jejaring sosial atau silahkan berkomentar di kolom komentar dibawah :) Maaf bila tutorialnya kurang jelas :) Silahkan di bagikan/di share untuk kepentingan bersama :)

Terima kasih atas kunjungannya ke blog saya dan sudah mau baca artikel saya, jika mau silahkan like dan berlangganan via email :D , Selamat malam :)


Sumber script : http://www.mybloggertricks.com/2011/07/create-drop-down-menu-in-blogger.html