MENU HORIZONTAL DENGAN EFEK RADIUS

Bisa dilihat sendiri kan dari judulnya diatas. Nah mungkin masih ada yang bingung dengan judul itu, kalau bingung lihat sendiri contohnya di menu horizontal yang di blogku ini (dibawah header).

Nah, tertarik atau tidak aku tetap akan kasih tahu cara membuatnya.

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...!!!

:)