Screenshot contoh Menu Navigasi Horisontal adalah seperti di bawah ini.
Langkah-langkah membuatnya adalah sebagai berikut.
Pertama, login ke account blogger hingga masuk Dasbor >> Tata Letak >> Edit HTML
Kedua, temukan kode ]]> (jika menggunakan Firefox, gunakan saja Ctrl + F untuk memudahkan pencarian kode tersebut).
Ketiga, copy kode di bawah ini di atas kode ]]>
.menuhorisontal{
width: 100%;
overflow: hidden;
}
.menuhorisontal ul{
margin: 0;
padding: 0;
padding-left: 10px;
font: bold 12px Arial; /* jenis dan ukuran huruf */
list-style-type: none;
}
.menuhorisontal li{
display: inline;
margin: 0;
}
.menuhorisontal li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px;
border-right: 1px solid black;
border-left:1px solid black;
color:#071907;
background: #A9F5A9; /*warna background Menu*/
}
.menuhorisontal li a:visited{
color: #088A08; /* warna teks menu jika linknya pernah dikunjungi*/
}
.menuhorisontal li a:hover, .menuhorisontal li.selected a{
background:#58ACFA; /*Warna Background Ketika Pointer Diarahkan */
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
height:35px;
}
Keterangan, silakan untuk mengganti warna dan juga font sesuai dengan selera masing-masing. Kode html untuk warna silakan lihat di sini.
Keempat, langkah berikutnya adalah cari dan temukan kode berikut ini.
Atau jika tidak ketemu, cari kode yang mirip atau jika bingung cari kode yang diapit warna merah.
Kelima, tempatkan kode di bawah ini di bawah kode di atas tersebut.
Keenam, simpan template
Ketujuh, langkah berikutnya adalah kita menuju menu Elemen Halaman (Dasbor >> Tata Letak >> Elemen Halaman).
Sekarang kita sudah dapat menambahkan gadget yang letaknya di bawah header.
Kedelapan, klik Tambah Gadget >> Tambahkan HTML/Javascript
Kesembilan, copy kode dengan format seperti di bawah ini.
Keterangan
Silakan untuk mengganti URL dan Link Teks sesuai dengan kehendak masing-masing.blognya masing-masing.
Kesepuluh, Simpan Perubahan
Kesebelas, refresh blog dan pastikan menu navigasi horizontalnya sudah “nangkring” pada header blog kita.
Selamat Mencoba!!
(sumber referensi : Tutorial Jitu)