MEMBUAT MENU HORIZONTAL DENGAN CSS

Sore kawan semua...
sudah lihat judulnya kan :)
kalau masih bingung seperti apa coba liat di bagian atas blogku...
yang ada tulisan beranda, daftar isi, dsb itu loh...
gimana bagus bukan..??
nahh, langsung saja untuk membuat menu horizontal dengan css kita menuju ke TKP :D


1. Login akun blog kalian
2. Masuk menu rancangan >>> edit html, kemudian carilah kode ]]></b:skin> lalu copy-paste kode berikut ini tepat diatas ]]></b:skin>

#top-nav{<br /> margin-top:168px;<br /> position:relative;<br /> margin-left:0<br /> }<br /> <br /> #top-nav ul{<br /> padding:0px;<br /> margin:0;<br /> color:#FFD700; float:left; width:100%;<br /> font-weight:normal;<br /> -moz-border-radius-topright:20px; -moz-border-radius-bottomright:20px;<br /> -webkit-border-top-right-radius:20px; -webkit-border-bottom-right-radius:20px<br /> }<br /> <br /> #top-nav ul li{display:inline}<br /> <br /> #top-nav ul li a{<br /> margin-left:2;<br /> margin-right:3px; padding-top:5px;<br /> padding-bottom:5px; text-align:center;<br /> color:#FFF; text-decoration:none; float:left;<br /> border:2px solid #151B8D;<br /> height:15px; font-size:12px; font-family:Verdana;<br /> padding-left:10px; padding-right:10px;<br /> background:url(http://i833.photobucket.com/albums/zz258/NYZHAR/a7x_header_ms_02.jpg) repeat-x; font-weight:bold;<br /> -moz-border-radius-topright:20px; -moz-border-radius-bottomright:20px;<br /> -webkit-border-top-right-radius:20px; -webkit-border-bottom-right-radius:20px<br /> }<br /> <br /> #top-nav ul li a:hover{<br /> color:#666; background:#000;<br /> text-decoration:bold;<br /> border:1px solid #999;<br /> -moz-border-radius-topright:20px; -moz-border-radius-bottomright:20px;<br /> -webkit-border-top-right-radius:20px; -webkit-border-bottom-right-radius:20px<br /> }

3. Kemudian simpan terlebih dahulu. Selanjutnya centang tanda Expand Template Widget dan cari kode yang menunjukkan header anda, kurang lebih seperti berikut :

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='UBAY NIZAR (Header)' type='Header'/>
</b:section>

4. Copy-paste kode berikut ini tepat dibawahnya :

<div id='top-nav'> <ul> <li><br /> <a href='http://ubaynyzhar.blogspot.com' title='Halaman Depan'>HOME</a><br /> </li> <li><br /> <a href='http://ubaynyzhar.blogspot.com/p/daftar-isi.html' title='Daftar Isi BLOG'>DAFTAR ISI</a><br /> </li> <li><br /> <a href='http://ubaynyzhar.blogspot.com/search/label/trik%20blogging' title='Trik-trik Bloging'>TIPS n TRIK</a><br /> </li> <li><br /> <a href='http://ubaynyzhar.blogspot.com/search/label/favourite' title='Faforitku'>FAVOURITE</a><br /> </li> <li><br /> <a href='http://ubaynyzhar.blogspot.com/search/label/hacking' title='Hacker, Hacking, Cracker, Cracking'>HACKING</a><br /> </li> <li><br /> <a href='http://ubaynyzhar.blogspot.com/2009/07/tukar-banner.html' title='Banner Exchange'>BANNER EXCHANGE</a><br /> </li> </ul> </div>

5. Edit kode diatas sesuai keinginan kalian dan sesuai link-link kalian.
6. Jangan lupa simpan template.

ech.........., ada yang lupa kode CSSnya juga bisa diedit kok...,
selamat berkreasi...!!!