Cara membuat Menu Bar pada blog

Pada postingan lalu, Blognya Reggy menerbitkan postingan tentang Cara Membuat Menubar Pada Template klasik blogger. Sama dengan postingan sebelumnya, kali ini kita akan membahas tentang "Cara membuat Menu Bar pada blog". Bila pada post sebelumnya untuk template klasik. Namun, kali ini untuk semua template yang terdapat kode - kode di bawah ini. Untuk memasangnya. Ikuti langkah - langkah di bawah ini sob:

1. Login pada blog sobat

2. Rancangan

3. Edit HTML

4. cari kode ]]></b:skin>

5. Copy kode di bawah ini dan pastekan di atas kode  ]]></b:skin>

#NavbarMenu
{
background:#DBDBDB;
width:900px;
height:35px;
color:#000000;
font:bold 10px Arial, Tahoma, Verdana;
clear:both;
margin:0 auto;
padding:0}
#NavbarMenuleft
{

width:955px;
float:left;
margin:0;
padding:0
}

#nav li
{
list-style:none;
float:left;
margin:0;
padding:0
}

#nav li a,#nav li a:link,#nav li a:visited
{
color:#000000;
display:block;
text-transform:capitalize;
font:normal 12px Georgia, Times New Roman;
margin:0;
padding:12px 11px 8px
}

#nav li a:hover,#nav li a:active
{
background:#ABABAB;
color:#DBDBDB;
margin:0;
padding:11px 9px 8px
}

#nav li li a,#nav li li a:link,#nav li li a:visited
{
background:#DBDBDB;
width:200px;
color:#000000;
text-transform:capitalize;
float:none;
border-bottom:1px solid #DBDBDB;
border-left:1px solid #DBDBDB;
border-right:1px solid #DBDBDB;
font:normal 12px Georgia, Times New Roman;
margin:0;
padding:7px 7px
}

#nav li li a:hover,#nav li li a:active
{
background:#ADADAD;
color:#fff;
padding:7px 7px
}

#nav li a.enclose,#nav li a.enclose:visited
{
border-top:1px solid #000
}

#nav li ul
{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin:0;
padding:0
}

#nav li ul a
{
width:140px
}

#nav li ul ul
{
margin:-75px 0 0 171px
}

#nav li:hover ul ul,#nav li:hover ul ul ul,#nav li.sfhover ul ul,#nav li.sfhover ul ul ul
{
left:-999em
}

#nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li.sfhover ul,#nav li li.sfhover ul,#nav li li li.sfhover ul
{
left:auto
}

#nav li:hover,#nav li.sfhover
{
position:static
}

#subnavbar
{
background:#004313;
width:968px;
height:24px;
color:#FFF;
margin:0;
padding:0
}

#subnav li a,#subnav li a:link,#subnav li a:visited
{
color:#f9fc01;
display:block;
font-size:11px;
text-transform:capitalize;
margin:0 5px 0 0;
padding:3px 13px
}

#subnav li a:hover,#subnav li a:active
{
color:#DCD900;
display:block;
text-decoration:none;
margin:0 5px 0 0;
padding:3px 13px
}

#nav ul,#subnav ul,#subnav li
{
float:left;
list-style:none;
margin:0;
padding:0
}

*,#nav,#subnav
{
margin:0;
padding:0
}

6. Selanjutnya, Cari kode

<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>

Agar tidak kebingungan, Cari saja <div id='header-wrapper'>
7. Copy kode di bawah ini dan pastekan di bawah kode no 6

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>

<li><a expr:href='data:blog.homepageUrl' title='Blognya Reggy'>Home</a></li>
<li><a href='http://blognya-reggy.blogspot.com/2011/11/daftar-isi.html'>Daftar Isi</a></li>
<li><a href='http://blognya-reggy.blogspot.com/search/label/Top Rate'>Top Rate</a></li>
<li><a href='http://blognya-reggy.blogspot.com/search/label/Games'>Games</a></li>
<li><a href='http://blognya-reggy.blogspot.com/search/label/Program'>Programs</a></li>
<li><a href='http://blognya-reggy.blogspot.com/search/label/Tutorial%20Blogspot'>Tutorial Blogspot</a></li>
<li><a href='http://blognya-reggy.blogspot.com/2011/11/cara-cepat-meningkatkan-page-rank-dan.html'>Backlink Gratis</a></li>
<li><a href='http://blognya-reggy.blogspot.com/2011/11/link-exchange.html'>Link Exchange</a></li>

</ul>
</div>
</div> 

• Ganti tulisan yang berwarna merah dengan link Post / label / link teman macem - macem deh yang penting link
• Ganti juga tulisan yang berwarna biru dengan judul label nya
• Jika sobat ingin menambahkan Postingan di menubar, copy kode yang Bergaris Bawah di bawah kode tersebut 

8. Simpan Template

Sampai disini dulu, Selamat Mencoba!! :D

TAMBAHAN:
Jika ingin membuat submenu, atau menu kebawah (seperti dropdown)
Sobat hanya tinggal menghapus kode </li> dan ganti dengan <ul>. Maka kodenya akan seperti ini

<li><a href='http://blognya-reggy.blogspot.com/2011/11/daftar-isi.html'>Daftar Isi</a>
<ul>
<li><a href='http://blognya-reggy.blogspot.com/search/label/Top Rate'>Top Rate</a></li>
<li><a href='http://blognya-reggy.blogspot.com/search/label/Games'>Games</a></li>
<li><a href='http://blognya-reggy.blogspot.com/search/label/Program'>Programs</a></li>
</ul></li>