Cara Membuat Drop Down Menu

Keuntungan dari penggunaan drop down menu adalah mengurang space untu navigasi bar di blog kamu. Namun untuk membuat drop down menu pada navigasi bar, bukanlah hal yang mudah. Apalagi untuk para blogger pemula yang belum mengerti dengan bahasa pemograman baik CSS ataupun HTML.

Nah, disini aku ingin mencoba untuk berbagi ilmu kepada kamu untuk membuat menu drop down. Tujuan aku agar kamu juga bisa membuat blog kamu lebih menarik dan kelihatan rapi. Karena penggunaan menu drop down akan mengurangi space blog kamu.

Cara Membuat Drop Down Menu

1. Pergi ke Blogger > Dashboard > Tata Letak

2. Kemudian pilih Add Gadget
3. Pilih HTML/Javascript widget
4. Kemudian masukkan kode di bawah ini

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

Ganti # dengan url yang ingin kamu tuju. Kemudian yang berwarna kuning adalah sub menu dari drop down menu yang kamu buat. Kamu bisa mengganti Sub Page #1 dengan nama menu yang kamu inginkan. Begitu juga seterusnya.

5. Sekarang masuk ke Dashboard > Tata Letak > Edit HTML
6. Back Up Template kamu kemudian cari kode di bawah

]]></b:skin>

7. Diatasnya letakkan kode di bawah ini

/*----- 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;
}

Ubahlah #060505 untuk merubah background dari menu utama
Ubahlah yang berwarna kuning untuk merubah warna, besar dan jenis huruf

Simpan template jika kamu sudah selesai untuk mengeditnya. Namun lebih baik kamu lihat dulu pratinjaunya sebelum menyimpan template.

Post Tags:

Tutorial Blogspot

Jillur Rahman

I'm Jillur Rahman. A full time web designer. I enjoy to make modern template. I love create blogger template and write about web design, blogger. Now I'm working with Themeforest. You can buy our templates from Themeforest.

Website: http://masala-jr.blogspot.com/