cara membuat menu bar drop down di blog









slamat pagi tmen............
di pagi hari yang cerah ini saya akan bagi " ilmu
di artikel ini saya akan memposting kan tentang membuat menu drop down
yaitu menu yang di atas itu lo tmen yang kalok di dekati kursor bisa turun ...
pasti tau kan .........kalau kurang jelas lihat gambar di atas aja .....
ok tmen gtu ja perkenalan menu drop down nya langsung ke cara buat nya....
1. Login pada blogger
2. masuk ke halaman Template
3. Edit HTML lalu Lanjutkan
4. Klik centang pada Expand Template Widget
5. Cari kode ]]></b:skin> (gunakan ctrl+f)
6. Pasang kode di bawah ini di atas kode ]]></b:skin>

Klik open untuk melihat
#menubar{
width:800px;
height:35px;
background:#de360f;
margin: 0 auto;
}
#menubar ul{
float:left;
margin:0;
padding:0;
}
#menubar li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#menubar li a, #menubar li a:link{
border-right:1px solid #F0512D;
float:left;
padding:8px 12px;
color:#fff;
text-decoration:none;
font-size:13px;
font-weight:bold;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {
color:#ffa500;
text-decoration:none;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #de360f;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:30px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #F0512D;
color: #ffa500;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:32px;
border:1px solid ##F0512D;
}
#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{
left:auto
}
#menubar li:hover, #menubar li.sfhover{
position:static
}
7. Selanjutnya cari kode <div id="content-wrapper">
8. kemudian letakkan kode di bawah ini di atas kode <div id="content-wrapper">

Klik open untuk melihat
<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://ahmadsukaelektronik.blogspot.com/'>name menu</a></li>
<li><a href='http://ahmadsukaelektronik.blogspot.com/'>name menu</a></li>
<li><a href='http://ahmadsukaelektronik.blogspot.com/'>name menu</a>
<ul>
<li><a href='http://ahmadsukaelektronik.blogspot.com/'>name menu</a></li>
<li><a href='http://ahmadsukaelektronik.blogspot.com/'>name menu</a></li>
</ul></li>
</ul>
</div>

Penjelasan :
1. text ber warna merah itu untuk menentukan panjang menu
2. text warna biru untuk menentukan tinggi menu
3. text warna hijau unuk menentukan alamat yang di tuju
4. text warna kuning unttuk menentukan judul menu

jadi deh menu bar drop down nya .............mudah kan sobat.........................
sampai disini dulu perjumpaan kita semoga bermanfaat buat anda semua..........salam blogger

4 komentar:

  1. kode nmr 7 gn q gk enek pye??????????????????????????????????????

    BalasHapus
    Balasan
    1. begini setiap template berbeda" nama code nya jadi agak sulit juga menyamakan kaya yang di atas .....solusinya cari code yang mirip seperti itu .....no 7 itu cuma tempat kita menaruh menu nya kok jaadi bisa di taruh di header ,footer,terserah anda deh mau di taruh di mana....

      Hapus
    2. pake html yg terbaru gimana???

      semua di klik ctrl+f gk ketemu smua. ada solusi lain gk?

      Hapus
    3. anonim@belum tau saya solusinya so'alnya saya belum coba html terbaru

      Hapus