Menu Horizontal Sederhana

Mungkin anda sudah sering melihat tutorial-tutorial bagaimana cara membuat menu horizontal di blog lain,sebenar nya tidak jauh berbeda,malah jauh lebih sederhana,tapi menurut saya lebih terlihat simple dan elegan.

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 :

 HTLM Kode:

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

Kode CCS

/* ^^^^^^^^ 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 ^^^^^^^^^^ */

4.Nah sekarang kita tinggal pasang saja kode diatas.Caranya:
- 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'>

bla..bla..bla......

</div>
- Letakkan kode CSS diatas kode :]]></b:skin>

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 birudengan nama link nya.

Selamat mencoba...

Related Post: