Membuat Menu Navigasi (Horizontal)

Panduan ini saya buat khusus buat teman-teman yang tertarik untuk menambah (memasang/membuat) menu navigasi horizontal di blog anda. Menu navigasi ini saya peroleh dari dynamicdrive. Kelebihan dari menu ini adalah tidak menggunakan image(gambar), jadi waktu loadingnya lebih cepat. kekurangannya tampilannya tidak menarik.Buat teman-teman yang tertarik anda bisa menggunakan cara pasang (tambah/buat) menu navigasi horisontal di blog dengan mengikuti prosedur di bawah ini.

Untuk membuat menu seperti di atas, bisa lakukan prosedur berikut:

1. Masuk ke Dashboard -> Tata Letak -> Edit Html
2. Cari kode berikut

]]></b:skin>
</head>


3. Setelah kode

]]></b:skin>
</head>

Masukkan script kode css berikut:

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.mattblacktabs{
width: 100%;
overflow: hidden;
border-bottom: 1px solid black;
}
.mattblacktabs ul{
margin: 0;
padding: 0;
padding-left: 10px; /*offset of tabs relative to browser left edge*/
font: bold 12px Verdana;
list-style-type: none;
}
.mattblacktabs li{
display: inline;
margin: 0;
}
.mattblacktabs li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #414141; /*background of tabs (default state)*/
}

.mattblacktabs li a:visited{
color: white;
}
.mattblacktabs li a:hover, .mattblacktabs li.selected a{
background: black; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
}
</style>

4. Klik tombol "Simpan Template"

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

6. Pada Elemen header , klik " Tambah Gadget"

Catatan: Jika anda menggunakan template default (bawaan) blogger maka tombol "Tambah gadget" tidak muncul pada bagian header.

7. setelah mengklik tombol "tambah gadget" pilih HTML/Javascript



8. pada kotak dialog berikut masukkan kode html

<div class="mattblacktabs">
<ul>
<li><a href="#" target="_blank">Home</li>
<li><a href="#" target="_blank">Windows</li>
<li><a href="#" target="_blank">Internet</li>
<li><a href="#" target="_blank">Modem Nokia</li>
<li><a href="#" target="_blank">ebook</li>
</ul>
</div>

catatan:
ganti url : http://artikelkomputerku.blogspot.com, dengan url blog anda
ganti # dengan url target yang akan di link ke menu
misalnya:
http://artikelkomputerku.blogspot.com/2009/02/tips-dan-trik-windows.html

Jika masih ingin menambah link navigasinya, maka sebelum
</ul>
</div>

tambahkan kode berikut:

<li><a href="url tujuan" target="_blank">teks yang ditampilkan (anchor teks)</li>

Klik tombol Simpan

Anda bisa mengatur menu navigasi tersebut, bisa anda geser di bagian atas gambar header atau di bawah gambar header.

Anda juga bisa mengganti warna background menu tersebut

border-bottom: 1px solid black;

=============================================
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #414141; /*background of tabs (default state)*/

==============================================
.mattblacktabs li a:hover, .mattblacktabs li.selected a{
background: black; /
==============================================

Ganti kata black, white, dan #414141

Sebagai acuan, warna yang bisa anda pilih bisa lihat di link berikut:
kode warna

Catatan :
Jika menu tidak berjalan dengan baik, coba letakkan script kode css di atas kode ]]></b:skin> (lihat langkah no.3)