-->

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:
<div id='mbtnavbar'>
          <ul id='mbtnav'>
            <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
                     <li><a href='#'>Tab Nama</a></li>
 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 http://ponda-samarkand.blogspot.com/2013/02/cara-membuat-menu-drop-down.html. Terima kasih sudah singgah membaca artikel ini.
1 Komentar di Blogger
Silahkan Berkomentar Melalui Akun Facebook Anda
Silahkan Tinggalkan Komentar Anda

1 komentar:

Anonim mengatakan...

Weist,, betambah lagi blogger STAIN nie,, :D

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)

Original design by Bamz | Copyright of Coretan Mahasiswa Kampung.

Pengikut

Recent Comment