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
}
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
}
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>
<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>
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
Halo sahabat semua, kali ini Info Bagus Fakta Bagus akan berbagi cara membuat sub menu bar di blog. Sub menu bar sangat diperlukan bagi setiap blogger sejati. Bagi para pengunjung hal ini juga sangat dibutuhkan guna mencari informasi berdasarkan pada kategori di sub menu bar. Memberi sub menu bar juga membuat blog kita tampak lebih tampan, teratur, dan praktis (tidak acak-acakan). Langkah-langkahnya berhubungan dengan edit HTML. Bagi para blogger pemula mungkin akan merasa sulit, tetapi sebenarnya hal ini sangat mudah. Ikuti saja langkah-langkah yang kami jelaskan di bawah ini. 
Postingan
