Jumat, 08 Januari 2010

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.

9 komentar:

suci mengatakan...

nice tutor,,btw ada part 1? mang part 2 nya apa?

barengklik mengatakan...

biasa mas,,karna mas udah bergabung di www.barengklik.blogspot.com ne aku setor di KB nya,,langsung dicek,,mas kalau bisa buat blog baru mas,,lebih ringan,,coba mas baca bener2 pada poin pertama ya mas,,sangat dimohon mas atas pasrtisipasinya

ALL IN tUmBuH mengatakan...

mantav info nya

halocoy lifestyle mengatakan...

thanks tipsnya bro. klo bs tlong kasih tipsnya utk horizontal menunya yg pake Sub-Menu. Misalnya yg di header Anda Tutorial Ngeblog itu ada 2 pilihan lagi didalamnya gitu. makaci ya bro.

ilmu kita-kita mengatakan...

thx sob..nanti saya coba

Fajar Studio Music mengatakan...

thx infonya

addhennanda mengatakan...

kode yg no 5 ga ada tak cari pake ctrl+f...

fahmi fauzi mengatakan...

klik expand widget template dlu gan..

Anonim mengatakan...

terima kasih ilmunya ,nanti akan saya coba.cakhol di jember

Posting Komentar

Komentar Anda sangat berarti

>

Guestbook Rolling Widget

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Grants For Single Moms