Cara membuat Menu Bar pada blog ~ Libra Blog

Kali ini saya akan menjelaskan bagaimana cara membuat menu bar pada blog. Namun, bedanya kali ini membuat menubar pada custom template. Untuk melihat bagaimana screenshot menubarnya lihat di bawah ini:

Karena banyaknya sobat blogger yang masih bingung membuat menubar, saya akan jelaskan melalui postingan ini agar lebih gampang dan mudah di mengerti.

Berikut langkah-langkahnya:
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 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://nama blog kamu.blogspot.com/'>Edit me</a></li>
<li><a href='http://nama blog kamu.blogspot.com/'>Edit me</a></li>
<li><a href='http://nama blog kamu.blogspot.com/'>Edit me</a></li>
<li><a href='http://nama blog kamu.blogspot.com/'>Edit me</a></li>
</ul>
</div>

9. Simpan Template dan lihat hasilnya

Untuk membuat sub menu bar (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://nama blog kamu.blogspot.com/'>Edit me</a></li>
<li><a href='http://nama blog kamu.blogspot.com/'>Edit me</a></li>
<li><a href='http://nama blog kamu.blogspot.com/'>Edit me</a>
<ul>
<li><a href='http://nama blog kamu.blogspot.com/'>Edit me</a></li>
<li><a href='http://nama blog kamu.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 kamu ganti tulisan 900px menjadi sesuai dengan keinginan.
Nah, jika kamu ingin menambah item menubar (list), kamu hanya tinggal CopyPaste di bawah kode yang bergaris bawah tersebut. kode yang bergaris bawah, dan paste dibawah kode yang bergaris bawah tersebut.