ada yang reuest, setelah cari-cari yang dpet mungkin mirip sama ini....coba dlu yah....
makasih buat yang udah nanya dan sumber saya mendapatkan cara ini yaitu trikblog
Ok..langsung aja,cara pasang menu navigasi horizontal nya sangat mudah :
1.Anda masuk dulu ke situs CSS menu generator di CSSPORTAL.COM
2.Anda pilih menu yang anda suka,saya ambil contoh anda pilih menu yang pertama,lalu anda klik.
3.Lalu anda akan mendapatkan kode CSS nya :
HTML CODE :
<div id="tabs31">
<ul>
<li><a href="#" title=""><span>Home</span></a></li>
<li><a href="#" title=""><span>About Us</span></a></li>
<li><a href="#" title="" class="current"><span>Services</span></a></li>
<li><a href="#" title=""><span>Our Work</span></a></li>
<li><a href="#" title=""><span>Contact Us</span></a></li>
</ul>
</div>
dan
CSS Code :4.Nah sekarang kita tinggal pasang saja kode diatas.Caranya:
/* ^^^^^^^^ BELOW IS THE CODE FOR THE MENU ^^^^^^^^^^ */
#tabs31{position:relative;display:block;height:39px;font-size:11px;font-weight:bold;background:transparent url(images/bgOFF1.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;border-top:4px solid #B30000;}
#tabs31 ul{margin:0;padding:0;list-style-type:none;width:auto;}
#tabs31 ul li{display:block;float:left;margin:0;}
#tabs31 ul li a{display:block;float:left;color:#666;text-decoration:none;padding:11px 20px 0 20px;height:23px;background:transparent url(images/bgDIVIDER1.gif) no-repeat top right;}
#tabs31 ul li a:hover,#tabs31 ul li a.current{color:#B30000;background:#fff url(images/bgON1.gif) no-repeat top right;}
/* ^^^^^^^^ ABOVE IS THE CODE FOR THE MENU ^^^^^^^^^^ */
- Masuk ke TATA LETAK --> EDIT HTML (beri tanda centang pada kotak expand text widget)
- Letakkan seluruh kode pada HTML KODE di bawah kode :
<div id='upper-wrapper'>- Letakkan kode CSS diatas kode :
bla..bla..bla...
</div>
]]></b:skin>4.Selesai...
Anda juga harus mendownload source nya pada situs nya agar tampilan sesuai dengan yang ada pada gambar.Tapi kalau saya tidak,malas download dan upload nya.Jadi tidak apa-apa kalaupun ga di download.
Ganti kode warna merah dengan alamat blog anda,ganti tulisan warna hijau dengan nama link nya.
Selamat mencoba...
sumber: trik blog
