Blog Ubay

Wah . . . , gak kerasa kita udah hampir masuk 10 hari terakhir bulan ramadhan. Tapi anehnya dalam waktu selama itu aku masih juga belum nemu ide buat posting. Entah karena bosan, males, sibuk juga, atau karena apalah ? aku sendiri juga gak tau. Tapi setelah sekian lama gak posting, kali ini aku mau posting sesuatu yang ringan aja.
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...!!!

:)