Home / Blog / Cara Membuat Menu Drop Down

Cara Membuat Menu Drop Down

Posted by Unknown Senin, 04 Februari 2013 1 komentar

Pada kesempatan ini saya akan menjelaskan secara singkat cara bagaimana membuat menu Drop Down diblog anda, selanjutnya bisa langsung dipraktekkan.. :)

pertama-tama siapkan gelas, kopi, dan gula. seduh kopi tersebut setelah itu bawa dan taroh disamping laptop/ komputer anda untuk menghilangkan kantuk (tidak ada hubungannya dengan tutorial membuat drop down) hehehe......

langkah yang pertama cara membuat menu drop down adalah sebagai berikut:

Sign ke Blogger > Design > Page Elements
Sekarang masuk ke Design > Edit HTML
Untuk jaga-jaga apabila ada kesalahan, silahkan anda download dulu template anda sebagai back up.
Cari kode ]]></b:skin>
Tambahkan kode di-bawah tepat sebelum kode ]]></b:skin>
/*----- MBT Drop Down Menu ----*/

    #mbtnavbar {

        background: #000000;

        width: 880px;

        color: #FFF;

            margin: 0px;

            padding: 0;

            position: relative;

            border-top:0px solid #000000;

            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 #DDD;

            border-right:1px solid #DDD;

            height:35px;

    }

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

        color: #000;

        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: #809FFE;

        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: #809FFE;

        width: 120px;

        color: #000;

        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: #2646A6;

        color: #FFF;

        display: block;

        margin: 0;

        padding: 9px 12px 10px 12px;

            text-decoration: none;

    }

Keterangan:
Silahkan Ganti kode yang saya tandai merah di-atas sesuai dengan keinginan anda.
Jangan Lupa Simpan pekerjaan anda
Kemudian Pilih dan tambahkan Gadget HTML/JavaScript yang berada di bawah Header blog anda dan tambahkan kode dibawah ini:

<li>

<a href='#'>Beranda</a>

</li>

<li>

<a href='#'>Tentang saya</a>

</li>

<li>

<a href='#'>Produk</a>

</li>

<li>

<a href='#'>Kontak</a>

<ul>

<li><a href='#'>Facebook</a></li>

<li><a href='#'>Twitter</a></li>

<li><a href='#'>Yahoo</a></li>

</ul>

</li>

</ul>

</div>

Keterangan:

1. Ganti tanda # dengan lamat url yang diinginkan

2. Apabila ingin menambah menu anda tinggal menambahkan kode di-bawah sebelum kode </ul>

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

3. Apabila ingin menambahkan drop down tinggal tambahkan kode di-bawah

Kode ini tinggal ditaroh seperti kode yang tertera di-atas seperti kode Facebook, Twitter dan Yahoo.

Sumber: http://jasapembuatanblog-murah.blogspot.com/

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul: Cara Membuat Menu Drop Down
Ditulis oleh Unknown
Rating Blog 5 dari 5

Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke https://ponda-samarkand.blogspot.com/2013/02/cara-membuat-menu-drop-down.html. Terima kasih sudah singgah membaca artikel ini.

Komentar di Facebook

1 Komentar di Blogger

Silahkan Berkomentar Melalui Akun Facebook Anda

Get This Facebook Comment

Silahkan Tinggalkan Komentar Anda

1 komentar:

Anonim mengatakan...: Weist,, betambah lagi blogger STAIN nie,, :D; 4 Februari 2013 pukul 20.25

Posting Komentar

Komentar yang tidak sesuai dengan syarat di bawah ini akan dihapus, Demi kenyamanan kita bersama :

1. Menggunakan bahasa tidak beretika (Sara, Pornografi, Menyinggung)
2. Komentar menautkan link secara langsung
3. Komentar tidak berkaitan dengan artikel
4. Komentar Scam (Promosi Link)