Cara Mudah Memasang Menu Bar Horizontal Di Blog

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 .Langsung aja berikut ini adalah Kodenya

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>

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

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

- Letakkan CSS KODE di atas kode :

]]></b:skin>

4.Selesai...
Ganti kode warna merah dengan LINK YANG DITUJU anda,ganti tulisan warna hijau dengan JUDUL TABNYA

Selamat mencoba...
Kalau ada yang bingung,tanya aja melalui kolom komentar ya!