Cara Membuat Menu Bar pada Blog

Saya akan coba shere artikel bagaimana cara membuat menu bar pada blog. Pada awalnya saya juga bingung bagaimana membuat menu bar pada blog tapi pada akhirnya saya sekarang sudah mahir dengan persoalan menu bar pada blog hehehehe...

Menu bar blog bisa dilihat seperti contoh gambar dibawah :

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>

#menubar{
width:900px;
height:32px;
background:#de360f;
float:center;
margin-bottom:10px;
}
#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. Selanjutnya Tambah Gaget
8.Pilih HTML/JavaScript dan Copy Paste kode dibawah

<div id='menubar'>
<ul>
<li><a href='url blog sobat'>Home</a></li>
<li><a href='http://alatigher.blogspot.com/'>Edit me</a></li>
<li><a href='http://alatigher.blogspot.com/'>Edit me</a></li>
<li><a href='http://alatigher.blogspot.com/'>Edit me</a></li>
<li><a href='http://alatigher.blogspot.com/'>Edit me</a></li>
</ul>
</div>

9. Simpan, dan lihat hasil.


 Keterangan:

• Ganti tulisan yang berwarna Merah dengan url link menubar yang diinginkan, misal: link postingan, link kategori, dan lainnya
• Ganti tulisan berwarna Biru (Edit me) dengan tulisan yang anda inginkan, Contoh: Home, Profil, Dafta Isi atau lainnya
• Untuk mengubah panjang menubar bisa sobat ganti tulisan 900px menjadi sesuai dengan keinginan sobat
• Nah, jika sobat ingin menambah item menubar (list), sobat hanya tinggal Copy kode yang bergaris bawah, dan Paste di bawah kode yang bergaris bawah tersebut.