Membuat Menu Navbar Horizontal

Menanggapi pertanyaan dari salah seorang teman tentang menu navbar horizontal ini, ku mau kasih tau caranya melalui posting kali ini.

Cara membuatnya cukup mudah, tinggal ikutin aja langkah berikut ini:

1. Login dulu ke blogspot.
2. Lalu ke TATA LETAK --> EDIT HTML.
3. Kemudian masukkan kode di bawah ini di atas kode ]]></b:skin>:

/* Navbar
----------------------------------------------- */
#bg_nav {
  border-bottom: 3px Double $bordercolor;
  border-top: 3px Double $bordercolor;
  width: 960px;
  height: 30px;
  font-size: 10px;
  font-family: Arial, Tahoma, Verdana;
  color: #ffffff;
  padding-top: 5px;
  padding-bottom: 5px;
}

#bg_nav a, #bg_nav a:visited {
  font-size: 11px;
  color : #000000;
  text-decoration: none;
  padding: 0px 0px 0px 3px;
}

#bg_nav a:hover {
  color: #ffffff;
  text-decoration: underline;
  padding: 0px 0px 0px 3px;
}

#navleft {
  width: 700px;
  float: left;
  padding-left: 15px;
}

#navright {
  width: 200px;
  height : 30px;
  float: right;
  padding-top: 3px;
  padding-right: 15px;
}


#nav ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

#nav a, #nav a:visited {
  color: #ffffff;
  display: block;
  font-weight: bold;
  margin: 0px;
  padding: 8px 15px 8px 15px;
  border-left: 0px solid #ffffff;
}

#nav a:hover {
  color: #ff0000;
  margin: 0px;
  padding: 8px 15px 8px 15px;
  text-decoration: none;
}

#nav li {
  float: left;
  margin: 0px;
  padding: 0px;
}

#nav li li {
  float: left;
  margin: 0px;
  padding: 0px;
  width: 150px;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
  background: #000000;
  width: 160px;
  float: none;
  margin: 0px;
  padding: 7px 30px 7px 10px;
  border-bottom : 3px double &bordercolor;
}

#nav li li a:hover, #nav li li a:active {
  background: #ffffff;
  padding: 7px 30px 7px 10px;
}

#nav li ul {
  position: absolute;
  width: 10em;
  left: -999em;
}

#nav li:hover ul {
  left: auto;
  display: block;
}

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

4. Letakan kode di bawah ini di atas kode <div id='content-wrapper'>:

<div id='bg_nav'>

<div id='navleft'>
<div id='nav'>

<ul>
<li><a href='Link Menu 1'>Menu 1</a></li>

<li><a href='#'>Menu 2</a><ul>
<li><a href='Link Sub Menu 2.1'>Sub Menu 2.1</a></li>
<li><a href='Link Sub Menu 2.2'>Sub Menu 2.2</a></li>
<li><a href='Link Sub Menu 2.3'>Sub Menu 2.3</a></li></ul></li>

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

Tinggal atur saja sesuai kebutuhan

5. Klik tombol simpan template.
6. Selesai deh!