Cara Membuat Menu Bar pada Blog

Rieztoshare di hari yang indah ini kembali lagi untuk sobat semua, dengan membawa segudang pengetahuan, ekekekek....tidak-tidak cuma beberapa aja kok, hehe. Yaps kali ini rieztoshare akan menuliskan cara membuat menu bar di blog, penting sekali sebagai seorang blogger untuk mengetahui cara ini, mengapa? Blogger akan menjadi lebih menarik, dan bila sobat blogger semua memiliki banyak fitur, pastinya sobat akan membuat kateogori untuk fitur-fitur yang sobat sediakan di blog sobat masing-masing, nah menu bar ini kita gunakan sebagai tempat atau judul fitur-fitur pada blog kita.Nah berikut merupakan contoh dari sebuah menubar.

Photobucket

Karena banyaknya sobat blogger yang berkomentar dan cari-cari tau tentang cara ini, jadi saya tulis deh langkah-langkah ini. Okeh yuks kita mulai langkah-langkahnya sob.
1. Login pada blogger
2. Masuk ke halaman Template
3. Edit HTMLlalu 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 cari kode <div id="content-wrapper">
8. Pasang kode di bawah ini di Atas kode yang bercetak tebal pada no 7
<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://rieztoshare.blogspot.com/'>Edit me</a></li>
<li><a href='http://rieztoshare.blogspot.com/'>Edit me</a></li>
<li><a href='http://rieztoshare.blogspot.com/'>Edit me</a></li>
<li><a href='http://rieztoshare.blogspot.com/'>Edit me</a></li>
</ul>
</div>
9. Simpan Template dan lihat hasilnya

Untuk membuat sub menu (menu dropdown) agar mudah ganti saja kode pada no 8 dengan kode di bawah ini
<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://rieztoshare.blogspot.com/'>Edit me</a></li>
<li><a href='http://rieztoshare.blogspot.com/'>Edit me</a></li>
<li><a href='http://rieztoshare.blogspot.com/'>Edit me</a>
<ul>
<li><a href='http://rieztoshare.blogspot.com/'>Edit me</a></li>
<li><a href='http://rieztoshare.blogspot.com/'>Edit me</a></li>
</ul></li>
</ul>
</div>
Keterangan:
  • Ganti tulisan yang berwarna Merah dengan url link menubar yang diinginkan, misal: link postingan, link kategori, link halaman statis atau lainnya
  • Ganti tulisan berwarna Biru (Edit me) dengan tulisan judul menubar tersebut, seperti: About, Contact, Guest book 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.
 Oke, sekian dulu ya postingan dari rieztoshare. Terimakasih dan semoga bermanfaat. ^_^