Cara Membuat Menu Horizontal part 1

Sekarang Saya coba memposting tentang cara membuat menu horizontal seperti yang ada di bawah header blog ini. Langsung saja ke pokok permasalahan, mungkin postingan ini sudah basi bagi Anda, tapi bagi saya tidak, karena saya baru bisa buatnya.

Ok. Bagi Anda yang belum tahu atau ingin mengganti menu yang lama dengan yang ini, kalian bisa mengikuti cara-cara seperti yang ada dibawah ini.


1. Masuklah ke akun blog Anda
2. Pilih Layout atau Tata letak
3. Pilih Edit HTML
4. Cari kode ]]></b:skin>, kemudian copykan code CSS ini tepat di atasnya.

/* navigation */

#nav {
float: left;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
background: #ccc;
border-bottom: 1px solid #999;
}

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

#nav a {
float: left;
display: block;
padding: 6px 30px 6px 5px;
text-decoration: none;
font-weight: bold;
font-size: 90%;
color: #666;
background: #ccc url(http://www.cssportal.com/horizontal-menus/images/nav_slant.gif) no-repeat top right;
}

#nav #nav-1 a {
padding-left: 20px;
}

#nav a:hover {
color: #000;
}

/* more */

ul#more {
clear: left;
margin-top: 60px;
}

5. Cari kode <div id='upper-wrapper'>, atau jika Anda tidak punya menu horizontal, cari saja kode

<div id='outer-wrapper'>
<div id='header-wrapper'>

blank...blank..
</div>

lalu buat aja kode ini di bawahnya.

<div id='upper-wrapper'>
<ul id="nav">
<li id="nav-1"><a href="URL Menu Anda">Judul Menu Anda</a></li>
<li id="nav-2"><a href="URL Menu Anda">Judul Menu Anda</a></li>
<li id="nav-3"><a href="URL Menu Anda">Judul Menu Anda</a></li>
<li id="nav-4"><a href="URL Menu Anda">Judul Menu Anda</a></li>
</ul>
<div>

6. Simpan deh.

Kalau bingung, silahkan berkomentar.