Membuat Menu Navigasi Horizontal di Blogspot dengan CSS Menu

Menu navigasi secara default belum tersedia di template blogspot. Untuk menampilkan atau membuat menu navigasi perlu ditambahkan script agar menu tersebut muncul di bagian header blog. Dalam postingan ini kita akan membuat menu navigasi  horisotal sederhana menggunakan script css.

Untuk membuatnya lakukan prosedur berikut:

1. Login ke akun blogger
Pilih Dashboard - Tata letak - Edit HTML

cari kode berikut:

/b:skin

2. Di bagian atas kode tersebut masukkan kode berikut

ul#menu
{
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
background:transparent url(http://i48.tinypic.com/2zgf4mo.jpg) repeat-x top left;
font-family:Arial, Helvetica, sans-serif;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}

ul#menu li
{
display:block;
float:left;
margin:0;
padding:0;
}

ul#menu li a
{
display:block;
float:left;
color:#999999;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
}

ul#menu li a:hover
{
color:#FFFFFF;
height:22px;
background:transparent url(http://i48.tinypic.com/2zgf4mo.jpg) 0px -30px no-repeat;
}


ul#menu li a.current
{
display:inline;
height:22px;
background:transparent url(http://i48.tinypic.com/2zgf4mo.jpg) 0px -30px no-repeat;
float:left;
margin:0;
}

3.  Klik tombol "Simpan Template"

4. Buka halaman "Tata Letak -> Elemen Halaman"

5. Pada Elemen header , klik " Tambah Gadget"

Catatan: Jika anda menggunakan template default (bawaan) blogger maka tombol "Tambah gadget" tidak muncul pada bagian header, untuk menampilkannya bisa lihat postingan saya tentang Menambah Slot ( Elemen ) Gadget di Header

6. Pilih gadget html/javascript

<ul id="menu">
<li class="button"><a class="current" href="#">Home</a></li>
<li class="button"><a href="#">Windows</a></li>
<li class="button"><a href="#">Hardware</a></li>
<li class="button"><a href="#">Free Software</a></li>
<li class="button"><a href="#">Soal2 Cpns</a></li>
</ul>
</div><!-- End of Nav Div -->

Catatan:
Pada script di atas
Ganti  semua tanda # pada href="#" dengan url target atau url tujuan.
misalnya: http://www.ferdianinfo.blogspot.com/
Home, Windows, Hardware ..., diganti dengan teks yang akan ditampilkan di menu

Agar script bisa berfungsi dengan baik, maka sebaiknya dicopy ke notepad atau word pad kemudian diedit sesuai kebutuhan blog anda.

Semoga Bermanfaat.....
Sb : http://artikelkomputerku.blogspot.com/2010/06/membuat-menu-navigasi-horisontal-di_21.html