Cara Membuat Menu Bar Di Blog

 oke gan, kali ini saya mau post tentang cara membuat menu bar seperti yang saya gunakan dengan warna merah diatas tulisan The Blog Firyal


1. Login pada blogger
2. Masuk ke halaman Template 
3. Edit HTML lalu Lanjutkan
4. Cari kode ]]></b:skin> , jika sudah ketemu pasang kode di bawah ini di atas kode ]]></b:skin>

#menubar{
width:900px;
margin-top:5px;
float:center;
background:#de360f;
height:35px;
border:1px solid #de360f;
}
#menubar-left{
float:left;
width:900px;
padding-top:1px;
}
#menubar ul{
position:relative;
overflow:hidden;
padding:0;
margin:0;
font-weight:none;
font-size:12px;
}
#menubar li{
cursor:pointer;
float:left;
margin:0 padding:0;
height:32px;
}
#menubar ul li{
float:left;
list-style:none
}
#menubar ul li a{
border-right:1px solid #F0512D;
float:left;
padding: 9px 12px;
text-decoration:none;
color: #ffffff;
font-weight:bold;
font-size:14px;
font-family: Calibri;
}
#menubar ul li a:hover{
background:transparent;
color: #ffa500;
}
#menubar ul li a.current, #menubar ul li a.current:visited, #menubar ul li a.current:hover{
color:#ffa500;
}

5. Setelah Itu Cari kode <div id='header-wrapper'> atau lebih lengkapnya seperti ini:

<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blognya Reggy (Header)' type='Header'/>
</b:section>
</div>

6. Pasang kode di bawah ini di bawahkode yang mirip dengan kode Pada no 5

<div id='menubar'>
<div id='menubar-left'>
<ul>
<li><a href='http://theblogfiryal.blogspot.com/' title='home'>Home</a></li>
<li><a href='http://theblogfiryal.blogspot.com/' title='blablabla'>blablabla</a></li>
<li><a href='http://theblogfiryal.blogspot.com/' title='blablabla'>blablabla</a></li>
<li><a href='http://theblogfiryal.blogspot.com/' title='blablabla'>blablabla</a></li>
<li><a href='http://theblogfiryal.blogspot.com/' title='blablabla'>blablabla</a></li>
</ul>
</div>
</div>

7. Simpan Template

Keterangan:
- Kode yang berwarna Biru adalah kode ukuran menubar. Sehingga bisa sobat ganti sesuai keinginan
- Kode yang berwarna Kuning HARUS sobat ganti dengan URL yang di inginkan, misal: Url ke suatu postingan / Kategori
- Kode Yang berwarna Hijau adalah Nama dari URL yang di inginkan
- Untuk title='bla..bla..bla' adalah deskripsi dari URL yang di inginkan
- Menubar bisa sobat ganti dengan mengcopy kode <li>hingga..</li> dan pastekan di bawahnya


- Firyal
MTCI
TBF Di Fb


LIKE YAAAAA

Ditulis Oleh : Firyal Rasya ~ theblogfiryal.blogspot.com

Anda telah membaca artikel The Blog Firyal Cara Membuat Menu Bar Di Blog. anda bisa meng"copas" nya tapi dengan menyertakan sumbernya dengan menggunakan kode di bawah di bagian HTML paling bawah postingan yang sudah anda copas, atau anda bisa meng sharenya dengan mengklik beberapa tombol di bawah <a href="http://www.firyalrasya.co.vu/2012/12/cara-membuat-menu-bar-di-blog.html" target="_blank">Cara Membuat Menu Bar Di Blog</a>
The Blog Firyal Menyediakan Yang Terbaik

TBF.Inc