Buat Menu Drop Down Di Blogger
Update: Kami telah menerbitkan hampir 9 lebih menu seperti ini. Untuk mendapatkan mereka semua hanya menggunakan kotak pencarian dan ketik drop down menu. Jika Anda ingin menambahkan menu yang sama untuk Blogger Template Designer template kemudian membaca posting ini -> menu Custom Drop Down
Mengapa Anda menjalankan setelah script seperti jquery sementara Anda dapat menggunakan CSS sederhana dan HTML untuk membuat menu drop down menu yang indah untuk blog Anda. Saya sudah berbagi daftar 30 menu Navigasi dan sekarang Anda perlu belajar cara membuat menu drop down di navigasi. Saya berbagi kode sederhana di sini yang dapat sepenuhnya menyesuaikan untuk membuat perubahan yang diinginkan. Jadi mari kita bekerja!
hidup Demo
Cara Membuat Drop Down Menu?
Sebuah menu drop-down diperlukan bila Anda memiliki terlalu banyak konten di blog Anda atau Anda cintai menjaga hal-hal terorganisir. Untuk menambahkan drop down menu untuk blog blogger Anda melakukan hal ini:
1. Pergi Untuk Blogger> Desain> Elemen Halaman
2. Pilih HTML / JavaScript Widget hanya di bawah header dan paste kode berikut di dalamnya,
<Div id = 'mbtnavbar'>
<Ul id = 'mbtnav'>
<Li>
<a href=' #'> Depan </a>
</ li>
<Li>
<a href=' #'> Tentang </a>
</ li>
<Li>
<a href=' #'> Hubungi </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 PT Link dan teks tebal dengan nama halaman yang relevan. Kode disorot kuning bertanggung jawab untuk menu drop down. Anda dapat copy dan paste di bawah setiap tab yang Anda inginkan sebelum </ li>
Untuk menambahkan tab lain hanya menyisipkan kode ini di atas </ ul>
<Li>
<a href=' #'> Tab Nama </a>
</ li>
3. Sekarang Pergi ke Desain> Edit HTML
4. Backup template Anda dan mencari,
]]> </ B: skin>
3. Tepat di atas itu paste kode di bawah ini,
/ * ----- MBT Drop Down Menu ---- * /
#mbtnavbar {
background: # 060505;
width: 960px;
Warna: # fff;
margin: 0px;
padding: 0;
position: relative;
border-top: 0px solid # 960100;
height: 35px;
}
#mbtnav {
margin: 0;
padding: 0;
}
#mbtnav ul {
float: kiri;
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 {
Warna: # fff;
display: block;
Font: 12px biasa Helvetica, sans-serif; margin: 0;
padding: 12px 10px 9px 12px;
text-decoration: none;
}
#mbtnav li a: hover, #mbtnav li a: aktif {
background: # BF0100;
Warna: # fff;
display: block;
text-decoration: none;
margin: 0;
padding: 12px 10px 9px 12px;
}
#mbtnav li {
float: kiri;
padding: 0;
}
#mbtnav li ul {
z-index: 9999;
position: absolute;
kiri: -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 {
kiri: -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 {
kiri: auto;
}
#mbtnav li: hover, #mbtnav li.sfhover {
Posisi: statis;
}
#mbtnav li li a, #mbtnav li li a: link, #mbtnav li li a: visited {
background: # BF0100;
width: 120px;
Warna: # fff;
display: block;
Font: 12px biasa Helvetica, sans-serif;
margin: 0;
padding: 12px 10px 9px 12px;
text-decoration: none;
z-index: 9999;
border-bottom: 1px dotted # 333;
}
#mbtnav li li a: hover, #mbtnavli li a: aktif {
background: # 060505;
Warna: # fff;
display: block; margin: 0;
padding: 12px 10px 9px 12px;
text-decoration: none;
}
Membuat perubahan ini:
Ubah # 060505 untuk mengubah warna latar belakang dari menu utama
Mengubah kuning yang disorot teks untuk mengubah warna font, ukuran dan keluarga
Ubah # BF0100 untuk mengubah latar belakang dari tab pada mouse hover
Ubah # BF0100 untuk mengubah warna latar belakang dari menu drop down
Ubah # 060505 untuk mengubah warna latar belakang dari menu drop down pada mouse hover
4. Simpan template Anda dan Anda selesai!
Kunjungi Blog Anda untuk melihat menu yang indah Navigasi tepat di bawah header. Selamat bersenang-senang! :)
Jika Anda memiliki pertanyaan jangan ragu untuk mempostingnya.
