Hai sobat !!!! saya udah rindu nih ma sobat soalnya kagak pernah ketemu ama nulis artikel (Soalnya modem internet saya lambat sih sob, hihihi!) Heh, gosib aja!!Sekarang kita membahas artikel yang sobat inginkan yaitu (kasih tau nggak yah??) "Cara membuat Menu Navigasi Drop down di blogger" TaDa!!!
Pasti sobat ingin sekali kan Menu Dropdown??
Yok kita langsung ja yok ,sob!!
Menu Dropdown adalah menu yang ada diatas header atau dibawahnya seperti di blogger kan, kan!! (Yang berjudul laman atau pages).
Tapi kalo yang di blogger kurang lengkap sob!! soalnya menunya hanya single/satu aja.
Kalo yang ini baru ada cabang-cabangnya biar lebih KOMPLIT sob!!!
Apakah ada yang belum tahu bentuknya atau kelihatannya???
Tinggal lihat aja Demonya
Dah tau kan kawan-kawan??
Langsung yukk!!
Berikut langkah-langkah menu dropdown di bawah:
1. Pastikan Sobat sudah masuk ke blogger
2. Klik Edit Template (Centang kotak Expand Template Widget)
3. Cari kode (Gunakan Ctrl+F biar cepat)
]]></b:skin>4. CoPaskan kode berikut tepat di atas kode ]]></b:skin>
/*----- MBT Drop Down Menu ----*/Yang bergaris adalah lebar menu dropdownnya
#mbtnavbar {
background: #00FF00;
width: 960px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #960100;
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 #00D000;
border-right:1px solid #00D000;
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 10px 12px;
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 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: #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;
}
#mbtnav li li a:hover, #mbtnavli li a:active {
background: #060505;
color: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
Ganti tulisan yang bergaya dengan kemauan sobat (sorry ye udah nyusahin)
5. Setelah itu sobat cari kode :1. <header> jika tidak ada <head> (menu diatas header)
2. </header> jika tidak ada </head> (menu dibawah header)
dan letakkan kode tersebut diatas kode pertama atau dibawah kode kedua
<div id='mbtnavbar'>
<ul id='mbtnav'>
<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>
<li><a href='#'>Sub Page #3</a></li>
</ul>
</li>
</ul>
</div>
Ganti # dengan url halaman sobat dan kode yang bergaris ganti dengan judul menunya.
Keterangan :
Kode berwarna biru adalah kode pembatas dropdown. jika sobat ingin menambahkan sub menu taruh kodenya sebelum kode </li>
Kode berwarna hijau adalah kode dropdown jika ingin menambahkannya lihat di cara no. 1
</ul> adalah kode terakhir, jika sobat ingin menambahkan menu baru taruh kode tersebut sebelum kode </ul>
<li>
<a href='#'>Nama Menu</a>
</li>
6. Setelah itu simpan dan lihat hasilnya
Bagus kan sob??
Ahh lega nih sob capek saya nulisnya
Tunggu Artikel berikutnya ya sob, dada!!!
Untuk pertannyaan tulis aja komentar
okok!!
SELAMAT BEREKSPERIMEN SOBAT!!!
Artikel ini ditulis oleh : Alwan ~ Pembuat website ini
Terimakasih sobat telah membaca : Cara membuat Menu Navigasi Drop down di blogger Artikel Saya oleh sobat boleh disebarluaskan atas izin pembuat Alwan'f magazine!!!, Asalkan sobat meletakkan link dibawah ini sebagai sumbernya
Postingan
0 komentar:
Posting Komentar