Membuat menu navigasi horizontal keren

Membuat menu navigasi horizontal keren - Kemarin blog ini menu navigasi horizontalnya bukan seperti yang saya pakai sekrang. Dulu menu navigasinya kurang memuaskan karena hanya 2 dimensi. Lihat kalau sekrang, Terlihat lebih elegant dari sebelumnya, warna yang sangat fantastik dan 3 dimensi.

Saya kalau mendapatkan ilmu baru pasti akan aku share di sini, Anda juga pasti ingin mencoba menggunakan menu navigasi seperti saya kan?

Mendingan langsung praktek aja, bahan yang di butuhkan hanya, listrik, komputer, dan jaringan Internet. jangan lupa untuk cemilannya agar lebih santei dalam mengerjakan ini.

• Buka blog anda, www.blogger.com, masuk di rancangan
• menuju sub menu Edit HTML
• Carilah kode seperti ini, ]]></b:skin> kemudian letakkan kode css di bawah ini tepat di atas kode tadi.

ul#menu{

margin:0;

padding:0;

list-style-type:none;

width:auto;

position:relative;

display:block;

height:36px;

text-transform:uppercase;

font-size:12px;

font-weight:bold;

background:transparent url("http://3.bp.blogspot.com/-CG-MmQM5z-w/TbZiLBlW_dI/AAAAAAAABJ4/rbb3KKGqn2c/s320/OFF.gif") repeat-x top left;

font-family:Helvetica,Arial,Verdana,sans-serif;

border-bottom:1px solid #74b0c6;

border-top:1px solid #74b0c6;

}

ul#menu li{

display:block;

float:left;

margin:0;

pading:0;}

ul#menu li a{

display:block;

float:left;

color:#6d7078;

text-decoration:none;

font-weight:bold;

padding:12px 20px 0 20px;

height:24px;

background:transparent url("http://1.bp.blogspot.com/-O9yYPx6o-30/TbZiLIpcwaI/AAAAAAAABJo/PclGFOClDAs/s320/DIVIDER.gif") no-repeat top right;

}

ul#menu li a:hover{

background:transparent url("http://2.bp.blogspot.com/-b_LDy0UTuqw/TbZiLNqpqgI/AAAAAAAABJw/RwEkYdOsMUU/s320/HOVER.gif") no-repeat top right;

}

• Selanjutnya cari kode di bawah ini

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>

</b:section>

</div>

• Pastekan kode di bawah ini setelah kode di atas ini

<ul id='menu'>

<li><a href='http://wartabeta.com/' title=''>Home</a></li>

<li><a href='http://wartabeta.com/' title=''>Free templates</a></li>

<li><a href='http://wartabeta.com/' title=''>Spot-id</a></li>

<li><a href='http://wartabeta.com/' title=''>Artikel Directory</a></li>

<li><a href='http://wartabeta.com/' title=''>Techradar</a></li>

</ul> 

•  Rubahlah yang berwarna merah dengan url dan nama anda
• Apabila sudah semua tinggal simpan,...

Untuk CSS di atas apabila anda mampu ngedit, anda dapt mengedit warna dan gambar,....
Semoga artikel ini bermanfaat bagi anda semua. dapatkan backlink berkualitas di W3 Directory