Penyanyi : Langkah-Langkah Membuat Menu Drop Down | Simple Blog
Judul lagu : Langkah-Langkah Membuat Menu Drop Down | Simple Blog
Langkah-Langkah Membuat Menu Drop Down | Simple Blog
Untuk membuat atau memasang menu drop down ini, agan ikuti langkah-langkah berikut :
Login Di Akun Bloger
Selanjutnya pada dashboard pilih tata letak dan tambah gadget
Pilih html javascript
Copykan kode berikut ke dalam html javascript
<div id='bungasdropdownmenu'>
<ul id='dropdownmenu'>
<li>
<a href='#'>Home</a>
</li>
<li>
<a href='#'>About</a>
</li>
<li>
<a href='#'>Contact</a>
</li>
<li>
<a href='#'>Sitemap</a>
<ul>
<li><a href='#'>Sub Page #1</a></li>
<li><a href='#'>Sub Page #2</a></li>
</ul>
</li> </ul>
</div>
Lihat pada Sitemap di bawahnya ada sub page, itulah yang dimaksud menu drop down. Jika sub menu anda lebih dari dua anda cukup menambahkan kode <li>...</li>
5. Seret gadget di atas post dan Simpan pengaturan tata letak,
kemudian ke template dan edit html
6. Cari kode ]]></b:skin>
7. Copykan kode di bawah ini tepat di atas kode ]]></b:skin>
/*----- Bungas Drop Down Menu ----*/
#bungasdropdownmenu {
background: #060505;
width: 960px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
}
#dropdownmenu {
margin: 0;
padding: 0;
}
#dropdownmenu ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#dropdownmenu li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #333;
border-right:1px solid #333;
height:35px;
}
#dropdownmenu li a, #dropdownmenu li a:link, #dropdownmenu li a:visited {
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#dropdownmenu li a:hover, #mbtnav li a:active {
background: #BF0100;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#dropdownmenu li {
float: left;
padding: 0;
}
#dropdownmenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#dropdownmenu li ul a {
width: 140px;
}
#dropdownmenu li ul ul {
margin: -25px 0 0 161px;
}
#dropdownmenu li:hover ul ul, #dropdownmenu li:hover ul ul ul, #dropdownmenu li.sfhover ul ul, #dropdownmenu li.sfhover ul ul ul {
left: -999em;
}
#dropdownmenu li:hover ul, #dropdownmenu li li:hover ul, #dropdownmenu li li li:hover ul, #dropdownmenu li.sfhover ul, #dropdownmenu li li.sfhover ul, #dropdownmenu li li li.sfhover ul {
left: auto;
}
#dropdownmenu li:hover, #dropdownmenu li.sfhover {
position: static;
}
#dropdownmenu li li a, #dropdownmenu li li a:link, #dropdownmenu li li a:visited {
background: #BF0100;
width: 120px;
color: #FFF;
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;
}
#dropdownmenu li li a:hover, #dropdownmenu li li a:active {
background: #060505;
color: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
Silahkan anda ubah kode warna yang hurufnya ditebakan sesuai dengan kinginan anda, gunakan tool kode warna untuk memudahkan anda.
8. Pratinjau template anda, jika berhasil langsung di simpan saja.
Demikianlah Artikel Langkah-Langkah Membuat Menu Drop Down | Simple Blog
Sekian Tutorial Blog dan Seo Langkah-Langkah Membuat Menu Drop Down | Simple Blog, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingan Tutorial Blog dan Seo kali ini.
0 Response to "Langkah-Langkah Membuat Menu Drop Down | Simple Blog"
Posting Komentar