1. 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:
<div id='mbtnavbar'>
<ul id='mbtnav'>
<li>
<a href='#'>Beranda</a>
</li>
<li>
<a href='#'>Tentang saya</a>
</li>
<li>
<a href='#'>Produk</a>
</li>
<li>
<a href='#'>Kontak</a>
<ul>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Twitter</a></li>
<li><a href='#'>Yahoo</a></li>
</ul>
</li>
</ul>
</div>
Keterangan:
Ganti tanda # dengan lamat url yang diinginkan
Apabila ingin menambah menu anda tinggal
menambahkan kode di-bawah sebelum kode </ul>
<li>
<a href='#'>Tab Name</a>
</li>
Sekarang masuk ke Design > Edit HTML
Untuk jaga-jaga apabila ada kesalahan, silahkan
anda download dulu template anda sebagai back up.
Cari kode ]]></b:skin>
Tambahkan kode di-bawah tepat sebelum kode
]]></b:skin>
/*----- 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
Demikaian Langkah-langkah dalam cara membuat menu
drop down blogspot –Bagian2 kali ini. semoga
bermanfaat.
Sumber http://jasapembuatanblog-murah.blogspot.com/2012/05/membuat-menu-drop-down-blogspot-bagian2.html
1.
Hal-hal yang telah dipelajari di Labindas
:
Hari pertama saya belajar tentang sejarah internet,
pengertian protocol, domain, dan sebagainya. Di hari ke dua saya belajar
mengenai search enginee, web browser, portal, klien, dan server.
2.
Pesan dan Kesan :
Labindas :
komputernya tolong diganti dengan yang lebih canggih atau modern. Ini kan laboratorium
internet dasar, seharusnya bisa menggunakan teknologi yang lebih
modern demi kelancaran pembelajaran lab. Internet dasar.
Tidak ada komentar:
Posting Komentar