Tambah tab menu horizontal sederhana dari CSS

Cara mudah untuk membuat tab menu navigasi horizontal sederhana

Ada beberapa member saya yang bertanya bagaimana cara membuat menu navigasi horizontal seperti yang ada di blog saya ini dan seperti menu horizontal yang seperti contoh di atas trikblog.co.cc ini.


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 :

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 :

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

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

Categories: Blogger