cara membuat menu navigasi (horizontal) sederhana

cara 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 menambah slot element pada header


selamat mencoba
blogger yang baik adalah blogger yang meninggalkan jejak