Sebuah menu drop down diperlukan bila Anda memiliki terlalu banyak konten di blog Anda atau Anda suka menjaga hal-hal yang terorganisir.
Untuk menambahkan drop down menu blog blogspot Anda silahkan melakukan hal-hal berikut ini:
Cara Membuat Drop Down Menu?
- Go To Blogger > Desain > Elemen Halaman
- Pilih Widget HTML / JavaScript yang berada di bawah header dan paste kode berikut di dalamnya,
<div id='buoglenavbar'>
<ul id='buoglenav'>
<li> <a href=''> # Home </ a> </ Li>
<li> <a href=''> # Tentang </ a> </ Li>
<li> <a href=''> # Contact </ a> </ Li>
<li> <a href=''> # Sitemap </ a>
<ul>
<a href=''> # Halaman Sub # 1 </ a> </ li>
<a <li> href=''> # Halaman Sub # 2 </ a> </ li>
<a <li> href=''> # Halaman Sub # 3 </ a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Div>
Untuk menambahkan tablain hanya paste kode di atas </ ul><li> <a href=''> # Nama Tab </ a> </ Li> - Kemudian Pergi ke Desain> Edit HTML
- Backup template anda dan cari,
]]> </ B: skin> - Tepat di atas kode itu silahkan pastekan code di bawah ini,
/*----- MBT Drop Down Menu ----*/
#buoglenavbar { background: #060505 ; width: 960px; color: #FFF; margin: 0px; padding: 0; position: relative; border-top:0px solid#960100; height:35px; }
#buoglenav { 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 10px12px; 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 10px12px; }
#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 10px12px; 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 10px12px; text-decoration: none; } - Simpan template Anda dan Anda selesai!
Nah! Begitulah cara membuat menu drop down di blogspot, Jika Anda memiliki pertanyaan jangan ragu bertanya untuk postingan ini.
Judul: Membuat Drop down Menu Blogspot
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh 10:24 PM
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh 10:24 PM