Membuat menu horizontal

Membuat menu horizontal. yups,kali ini kita akan membahas tentang ini,cara ini sangatlah mudah dengan sedikit memodifikasikan kode html,menu horizontal ini sangatlah bermanfaat bagi para sahabat blogger pemula seperti aku ini. okey langsung saja kita lakukan apa yang kita ingin lakukan. hehe

Berikut langkah-langkahnya :
-Masuk ke edit HTML
-jangan lupa centang Expand Template Widget
-Cari kode ]]></b:skin>
(tekan F3 untuk memudahkan mencari)
-Letakan kode dibawah ini diatas kode ]]></b:skin>

#navigation {

list-style: none;

background: #b60002;

overflow: hidden;

width: 922px;

}

#navigation li {

float: left;

border-right: solid 1px #ca0002;

height: 35px;

}

#navigation li a:link, #navigation li a:visited {

text-decoration: none;

display: block;

height: 35px;

color: #fff;

line-height: 35px;

padding: 0 9px 0 9px;

border-right: solid 1px #990000;

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

font-weight: bold;

}

#navigation li a:hover {

background: #990000;

color: #fff;

list-style: none;

}

#navigation li.first {

border-left: solid 1px #ca0002;

}

-Lalu simpan
-Kemudian pergi ke elemen laman(tambah gadget)
-Lalu tambahkan HTML/JAVASCRIPT
-Terus isikan kode berikut didalamnya

<ul id="navigation">

<li class="first"><a href="#">Home</a></li>

<li><a href="#">Judul 2</a></li>

<li><a href="#">Judul 3</a></li>

<li><a href="#">Judul 4</a></li>

<li><a href="#">Judul 5</a></li>

<li><a href="#">Judul 6</a></li>

<li><a href="#">Judul 7</a></li>

<li><a href="#">Judul 8</a></li>

<li><a href="#">Judul 9</a></li>

<li><a href="#">Judul 10</a></li>

-Simpan dan selesai.

Keterangan :
-Warna hijau adalah link tujuan.
(Sisipka link tujuan kamu)
-Warna merah adalah judul.
(Beri judul sesukamu)

Please read: Do not be stingy with the knowledge that you can.

Selamat mencoba ya :)