Cara Membuat menu navigasi horisontal dengan css menu (versi blue sprite) di blog

Baiklah Sobaat. Hari ini saya akan memberikan tips baru kepada sobat tentang cara membuat menu navigasi horizontal di blogspot dengan css menu (versi blue sprite) agar Blog kita bisa terlihat lebih rapi dan lebih cantik.:)

Menu navigasi secara default belum tersedia di template blogspot. Menu navigasi horisontal versi blue sprite adalah varian dari menu navigasi sebelumnya seperti menu navigasi massive blue yang menggunakan script css . Untuk lebih jelasnya, bisa anda lihat gambar dibawah ini:

Nah sobat ku semua. gambar diatas merupakan menu navigasi yang akan kita buat pada postingan kali ini. Dan jika ingin mengganti menu lain sobat bisa lihat pada postingan saya sebelumnya. Bisa sobat lihat disini:

1. Menu Horizontal sederhana

2. Dropdown 2 level

Baik. Untuk menghemat waktu, kita mulai saja praketknya. Untuk membuat navigasi diatas, bisa sobat ikuti langkah-langkah dibawah ini:

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;

}

Untuk Lebih Jelas, bisa anda lihat gambar dibawah ini :

3.  Klik tombol "Save Templete/Simpan Template"

4. Buka halaman "Design/Tata Letak -> Page Element/ Elemen Halaman"

5. Pada Elemen header , klik " Add Gadget/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 cara menampilkan "Add Gadget Header/tambah gadget header" di header

6. Pilih gadget html/javascript
masukkan script berikut :

<ul id="menu">

<li class="button"><a class="current" href="http://www.rizaltips.com">Home</a></li>

<li class="button"><a href="http://www.rizaltips.com">Blogger Tips</a></li>

<li class="button"><a href="http://www.rizaltips.com">SEO</a></li>

<li class="button"><a href="http://www.rizaltips.com">F.A.Qs</a></li>

<li class="button"><a href="http://www.rizaltips.com" target="_blank">Contact Me</a></li>

</ul>

</div><!-- End of Nav Div -->

Catatan:
Pada script di atas, Ganti  semua tanda http://www.rizaltips.com pada href="http://www.rizaltips.com" dengan url target atau url tujuan.
misalnya: http://rizalblogmaster.blogspot.com/

seperti: Home, Blogger Tips, Seo Tips ..., diganti dengan teks yang akan ditampilkan di menu sesuai dengan keinginan anda.

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

Semoga Postingan saya bermanfaat bagi anda semua. Have a nice blogging.:)