Cara Menbuat Menu Bar pada Blog yang biasa dan updown

Hallo sobat NB... gmna kabarnya..?? mudah"n baik-baik semua ya :)








Kali ini saya mau kasih tau Cara Menbuat Menu Bar pada Blog yang biasa dan updown, yuk langsung ke TKP,

 

Perhatian : Harap dibaca terlebih dahulu dengan baik, karena bila ada kesalahan dalam  mengedit bukan tanggung jawab saya.

1. Login pada blogger sobat
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;
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. Selanjutnya cari kode <div id="content-wrapper">
8. Pasang kode di bawah ini Tepat diatas kode <div id="content-wrapper">

 <div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://nb119.blogspot.com/'>Category</a></li>
<li><a href='http://nb119.blogspot.com/'>Category</a></li>
<li><a href='http://nb119.blogspot.com/'>Category</a></li>
<li><a href='http://nb119.blogspot.com/'>Category</a></li>
</ul>
</div>

9. Klik Simpan Template

Ettsss... jgn di tutup dulu sob, ila kalian ingin membuat sub menu (menu dropdown) agar mudah ganti saja kode pada kolom diatas dengan kode di bawah ini :

 <div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://nb119.blogspot.com/'>Category</a></li>
<li><a href='http://nb119.blogspot.com/'>Category</a></li>
<li><a href='http://nb119.blogspot.com/'>Category</a>
<ul>
<li><a href='http://nb119.blogspot.com/'>Category</a></li>
<li><a href='http://nb119.blogspot.com/'>Category</a></li>
</ul></li>
</ul>
</div>

Keterangan :

• Ganti tulisan yang berwarna Merah dengan url link menubar yang diinginkan, misalnya : Link postingan, Link kategori, Link halaman statis atau lain sebagainya.
• Ganti tulisan berwarna Hijau (Category) dengan tulisan judul menubar tersebut, seperti: About, Contact, Guest book atau lain sebagainya
• Untuk mengubah panjang menubar, sobat bisa ganti tulisan 900px menjadi sesuai dengan keinginan sobat NB
• 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.

Selamat mencoba dan semoga bermanfaat ^_^

Jangan lupa like ya sob