Cara membuat menu bar pada blog

Nah kali ini, saya akan memberikan penjelasan untuk teman-teman sekalian mengenai cara membuat menu bar seperti yang diatas... coba teman-teman ikuti langkah dibawah ini:


1. Log in pada blogger
2. Masuk ke halaman template
3. Edit html
4. Klik centang pada expand template widget
5. Cari kode ]]></b:skin> gunakan ctrl F
6. Pasang kode dibawah ini, diatas kode ]]></b:skin>
   

#menubar{
width:900px;
height:32px;
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:underline;
}
#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. Simpan template

8. Masuk ke halaman tata letak

9. Pilih tambah gadget

10. Pilih java script/ html

11. Copy kode di bawah ini:

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl' title='This Blog Address'>Beranda</a></li>
<li><a href='http://fisikamodernmahasiswaunsri.blogspot.com/2012/10/ketidakpastian-heisenberg.html'><b>Heisenberg</b></a></li>
<li><a href='http://fisikamodernmahasiswaunsri.blogspot.com/2012/10/efek-compton.html' title='This Compton'>jCompton</a></li>
<li><a href='http://fisikamodernmahasiswaunsri.blogspot.com/2012/10/foton-dan-efek-fotolistrik.html' title='This fotolistrik'>fotolistrik</a></li>
<li><a href='http://fisikamodernmahasiswaunsri.blogspot.com/2012/10/tenaga-kuantum.html' title='This Kuantum'>tenaga kuantum</a></li>
</ul></div>
</div>

12. Simpan

Keterangan: 

warna merah, teman-teman ganti dengan alamat halaman blog teman-teman

warna hijau dan kuning ganti judul dari halaman blog teman-teman (judul disini maksudnya judul pada menu bar masing-masing)

ok sekian dari saya .. semoga berhasil membuatnya .. kalau ada kesulitan silahkan komen di bawah .. oh yah jangan lupa follow yah ...