Membuat menu navigasi (horizontal) sederhana

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, untuk menampilkannya bisa lihat postingan saya tentang cara menampilkan "tambah gadget" di 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

Update:
Berhubung ada beberapa teman yang menanyakan url target diambil dari mana, untuk sederhanya saat anda membuka sebuah halaman, bisa halaman dalam blog anda maupun blog lain, maka pada saat membuka halaman tersebut akan terlihat url target di address bar browser anda. Setiap halaman mempunyai url yang unik, artinya jika di dalam blog anda ada 100 postingan, maka ada 100 url (yang bisa dijadikan url target di menu).

Contoh url target bisa anda lihat di bawah ini:

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

Artikel Terkait :