Membuat Menu Bar horizontal di Blogger

Kali ini saya akan memberikan sedikit tutorial untuk membuat menu bar yang ada di blogger. Caranya lumayan susah juga menurut saya, karena harus mengganti warna-warna agar sesuai dengan blog ini. Mengapa saya membuat tutorial ini? Sebab, ada sebagian template blogger yang tidak menyertakan menu bar seperti yang saya gunakan ini. Jadi, menurut saya tidak ada salahnya untuk membuat menu bar sendiri untuk memudahkan peng-index-an.

Kira-kira screenshotnya seperti ini:








Berikut ini langkah-langkah membuatnya:

1. Masuk ke menu design dan pilih edit HTML, dan jangan lupa centang Expand Widget Template

2. Cari code berikut :  ]]></b:skin>

3. Setelah itu, copy kan code berikut ini di atas code : ]]></b:skin>

Ini untuk versi yang menggunakan search bar

#NavbarMenu{background:#005094;border-top: 1px solid #3373a9;border-bottom: 1px solid #3373a9;width:968px;height:32px;color:#FFF;font:bold 8px Arial, Tahoma, Verdana;clear:both;margin:0 auto;padding:0}
#NavbarMenuleft{width:758px;float:left;margin:0;padding:0}#search{width:210px;font-size:11px;float:right;margin:0;padding:0}
#nav li{list-style:none;float:left;background:#005094;border-left:1px solid #3373a9;border-right:1px solid #003867;margin:0;padding:0}
#nav li a,#nav li a:link,#nav li a:visited{color:#fff;display:block;text-transform:capitalize;font:normal 12px Georgia, Times New Roman;margin:0;padding:10px 9px 6px}
#nav li a:hover,#nav li a:active{background:#1a4c76;color:#red;text-decoration:none;margin:0;}
#nav li li a,#nav li li a:link,#nav li li a:visited{background:#005094;width:200px;color:#fff;text-transform:capitalize;float:none;border-bottom:1px solid #3373a9;border-top:1px solid #003867;font:normal 11px Georgia, Times New Roman;margin:0;padding:7px 10px}
#nav li li a:hover,#nav li li a:active{background:#1a4c76;color:#fff;padding:7px 10px}
#nav li a.enclose,#nav li a.enclose:visited{border-bottom: 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}#searchform{overflow:hidden;display:inline;margin:0;padding:0}
#searchbox{background:#ddd;margin:0;padding:0}#search input{background:transparent;color:#fff;float:left;font-size:12px;width:158px;border:1px solid #fff;font:normal 10px arial, verdana, Times New Roman;margin:7px 0 0 10px;padding:3px 7px}#search .btn{width:auto;border:0;margin:7px 0 0;padding:0}
#subnavbar{background:#004313;width:962px;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}

Ini untuk versi tanpa search bar

#NavbarMenu{background:#9A9A9A;border-top: 1px solid #AEAEAE;border-bottom: 1px solid #AEAEAE;width:968px;height:32px;color:#FFF;font:bold 8px Arial, Tahoma, Verdana;clear:both;margin:0 auto;padding:0}
#nav li{list-style:none;float:left;background:#9A9A9A;border-left:1px solid #AEAEAE;border-right:1px solid #707070;margin:0;padding:0}
#nav li a,#nav li a:link,#nav li a:visited{color:#fff;display:block;text-transform:capitalize;font:normal 12px Georgia, Times New Roman;margin:0;padding:10px 9px 6px}
#nav li a:hover,#nav li a:active{background:#dfdfdf;color:#red;text-decoration:none;margin:0;}
#nav li li a,#nav li li a:link,#nav li li a:visited{background:#9A9A9A;width:200px;color:#fff;text-transform:capitalize;float:none;border-bottom:1px solid #AEAEAE;border-top:1px solid #707070;font:normal 11px Georgia, Times New Roman;margin:0;padding:7px 10px}
#nav li li a:hover,#nav li li a:active{background:#1a4c76;color:#fff;padding:7px 10px}
#nav li a.enclose,#nav li a.enclose:visited{border-bottom: 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}#searchform{overflow:hidden;display:inline;margin:0;padding:0}
#subnavbar{background:#84847D;width:962px;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}

untuk yang berwarna merah, bisa anda ganti sesuai dengan warna tema blog Anda supaya serasi.

4. Nah, kalau sudah, sekarang cari code yang kira-kira seperti di bawah ini:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:section class='headerright' id='headerright' preferred='no'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
</b:section>
</div>

biar agak mudah mencarinya, search aja elemen yang ada di atas seperti  <div id='header-wrapper'> atau div id='header-wrapper saja..

Setelah itu masukkan code ini dibawah code tadi

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl' title='This Blog Address'>Home</a></li>
<li><a href='#'>menu</a>
 <ul>
  <li><a href='#'>menu</a></li>
  <li><a href='#'>menu</a></li>
  <li><a href='#'>menu</a></li>
 </ul></li>
<li><a href='#' title='menu'>menu</a>
 <ul>
  <li><a href='#'>menu</a></li>
  <li><a href='#'>menu</a></li>
 </ul></li>
<li><a href='#' title='menu'>menu</a></li>
<li><a href='#'>menu</a></li>
</ul></div>
</div> 

Nah, kemudian edit saja teks yang berwarna merah dan hijau sesuai dengan keinginan An

Selamat mencoba... ^^v