Cara Membuat Menu Bar Di Blog

Berikut langkah-langkah cara Membuat menu bar di blog anda:

• Login terlebih dahulu ke blogger
• Klik Tata Letak
• Edit HTML
• Cari kode ]]></b:skin>
• Kemudian Copy Paste kode di bawah ini persis diatas kode ]]></b:skin>
  
  

  #NavbarMenu
  {
  background:#ccc;
  width:968px;
  height:32px;
  color:#FFF;
  font:bold 8px 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:#fff;
  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:#ccc;
  color:#FFF;
  text-decoration:none;
  border-right:1px solid #296204;
  border-bottom:1px solid #296204;
  border-left:1px solid #296204;
  margin:0;
  padding:12px 9px 8px
  }
  
  #nav li li a,#nav li li a:link,#nav li li a:visited
  {
  background:#ccc;
  width:200px;
  color:#fff;
  text-transform:capitalize;
  float:none;
  border-bottom:1px solid #0d2601;
  border-left:1px solid #0d2601;
  border-right:1px solid #0d2601;
  font:normal 14px Georgia, Times New Roman;
  margin:0;
  padding:7px 10px
  }
  
  #nav li li a:hover,#nav li li a:active
  {
  background:#184303;
  color:#fff;
  padding:7px 10px
  }
  
  #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
  }

Kemudian cari kode

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

Cari Berdasarkan <div id='header-wrapper'>

Kemudian Copy paste kode di bawah ini di bawah kode tersebut

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl' title='This Blog Address'>Beranda</a></li>
<li><a href='http://andrieshare.blogspot.com/2011/07/alat-dan-bahan-fiddler-swf-download.html'><b>cheat</b></a></li>
<li><a href='http://andrieshare.blogspot.com/2011/07/alat-dan-bahan-fiddler-swf-download.html' title='This cheat'>cheat</a></li>
<li><a href='http://andrieshare.blogspot.com/2011/07/alat-dan-bahan-fiddler-swf-download.html' title='This chet'>cheat</a></li>
<li><a href='2011/07/alat-dan-bahan-fiddler-swf-download.html' title='This cheat'>cheat</a></li>
</ul></div>
</div>

Ganti Alamat link diatas yang berwarna merah dan biru dengan link yang anda miliki

Kemudian Simpan tamplate anda dan lihat hasilnya

Selamat mencoba...... ^^