Cara membuat menu horizontal

 Pada postingan kali ini akan membahas tentang cara membuat menu horizontal. Menu horizontal merupakan menu utama yang berada dibawah header.


Langkah-langkahnya :

1. Masuk ke akun blog sobat.

2. Klik Rancangan.

3. Klik Edit HTML.

4. Cari kode ]]></b:skin>
Untuk mempermudah pencarian tekan ctrl+f.

5. Copy kode dibawah ini dan pastekan diatas kode ]]></b:skin>.


/*  navbar
==================  */

#bg_nav {
background: #ffffff;
width: 850px;
  height: 29px;
font-size: 11px;
  font-family: Arial, Tahoma, Verdana;
color: #000000;
  font-weight: bold;
  margin: 0px auto 0px;
  padding: 0px;
  border-top: 1px solid #000000;
  border-bottom: 1px solid #ffffff;
  overflow: hidden;
  }
#bg_nav a, #bg_nav a:visited {
color: #000000;
  font-size: 11px;
  text-decoration: none;
  text-transform: uppercase;
  padding: 0px 0px 0px 3px;
  }

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

#navleft {
width: 500px;
  float: left;
  margin: 0px;
  padding: 0px;
  }
#navright {
width: 220px;
font-size: 11px;
  float: right;
  margin: 0px;
  padding: 3px 5px 0px 0px;
  }
#navright a img {
  border: none;
  margin: 0px;
  padding: 3px 5px 0px 0px;
  }

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

#nav a, #nav a:visited {
background: #ffffff;
  color: #000000;
  display: block;
  font-weight: bold;
  margin: 0px;
  padding: 8px 15px 8px 15px;
  border-left: 1px solid #ffffff;
  }
#nav a:hover {
background: #c06000;
  color: #000000;
  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: #ffffff;
width: 160px;
  float: none;
  margin: 0px;
  padding: 7px 30px 7px 10px;
  border-bottom: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  }
#nav li li a:hover, #nav li li a:active {
background: #c06000;
  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;
  }                             

Keterangan :
Untuk menyesuaikan dengan template blog sobat maka sobat harus mengatur kode-kode warna diatas khususnya width: 850px; untuk menyesuaikan dengan lebar template blog sobat.


6. Selanjutnya cari kode dibawah ini.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'
showaddelement='no'>
<b:widget id='Header1' locked='true' title='test
(Header)' type='Header'/>

... dan seterusnya ...

</b:section>
</div>

7.  Copy kode dibawah ini dan pastekan dibawah kode pada langkah No.6. Letakkan dibawah warna hijau atau warna merah (Sesuaikan dengan template blog sobat).


<div id='bg_nav'>

<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
</ul>
</div>
</div>

<div id='navright'>

<form action='http://Alamat_Blog_Kamu.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Cari'/>
</form>

</div>
</div><!-- akhir bg_nav -->


Keterangan :
Warna biru : ganti dengan alamat blog sobat.
Warna merah : ganti dengan link postingan blog sobat.
Warna hijau : ganti dengan nama menu yang sobat inginkan.

8. Klik Simpan Template.