Membuat menu drop down blogspot –Bagian2

Membuat menu drop down blogspot –Bagian2

Alhamdulillah, akhirnya artikel cara membuat menu dropdown di blogspot bagian 2 sudah selesai dan saya bisa berbagi dengan anda. Pada beberapa waktu yang lalu saya telah menulis artikeldropdown bagian ke-1. Menu dropdown Horizontal kali ini adalah dengan menggunakan kode CSS dan HTML yang simple sehingga mudah dalam pembuatan-nya tentunya dengan hasil yang memuaskan. Menu dropdown ini berfungsi ketika anda sudah mempunyai konten yang banyak dan ingin mempermudah pengunjung mengakses artikel atau page/halaman yang anda pilih sehingga lebih kontenblog anda lebih terorganisir.

Langkah yang saya terangkan di-bawah hasilnya seperti pada demo:

Cara membuat menu drop down di blogspot adalah sebagai berikut:

• Sign ke Blogger > Design > Page Elements
• Pilih dan tambahkan Gadget HTML/JavaScript yang berada di bawah Header blog anda dan tambahkan kode dibawah ini:

• Beranda

• Tentang saya

• Produk

• Kontak

• Facebook

• Twitter

• Yahoo

Keterangan:

1. Ganti tanda # dengan lamat url yang diinginkan
2. Apabila ingin menambah menu anda tinggal menambahkan kode di-bawah sebelum kode

Tab Name

• Sekarang masuk ke Design > Edit HTML
• Untuk jaga-jaga apabila ada kesalahan, silahkan anda download dulu template anda sebagai back up.
• Cari kode ]]>
• Tambahkan kode di-bawah tepat sebelum kode ]]>

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