Navigasi ini merupakan navigasi biasa, namun tampilannya cukup menarik. Saya menambahkan efek hover yang akan berfungsi ketika mouse anda diarahkan ke navigasi tersebut. Anda dapat memodifikasi sendiri mengikuti petunjuk yang saya sertakan. Saya harap anda bisa merubahnya sesuai keinginan anda. Ikuti langkah berikut.

Log in ke blog anda
Klik Rancangan
Klik Tambah Gadget
Pilih HTL/JavaScript
Masukkan kode berikut ke dalamnya

<style type="text/css">
.goblog-hovermenu ul{font:bold 13px arial; padding-left:0; margin-left:0px; height:20px}
.goblog-hovermenu ul li{list-style:none; display:inline}
.goblog-hovermenu ul li a{padding:2px 0.5em; text-decoration:none; float:left; color:black; background-color:#FE642E; border:2px solid #BDBDBD}
.goblog-hovermenu ul li a:hover{background-color:#886A08; border-style:outset}
html>body .goblog-hovermenu ul li a:active{border-style:inset}
</style>

<div class="goblog-hovermenu">
<ul>
<li><a href="http://masukkan alamat blog anda di sini">Beranda</a></li>
<li><a href="http://www.blogger.com/profile/masukkan-id-profil-anda-di sini" rel="nofollow" target="_blank">Profile</a></li> /* caranya klik rancangan - dasbor - lihat profile, lalu ambil kode berupa angka di adress bar anda di bagian paling akhir */
<li><a href="http://masukkan alamat feed anda di sini" rel="nofollow" target="_blank">Subscribe</a></li>
<li><a href="http://twitter.com/user name twitter anda" rel="nofollow" target="_blank">Twitter</a></li> /* misalnya twitter.com/goblog */
<li><a href= "http://html-color-codes.info/" rel="nofollow" target="_blank">Kode Warna</a></li> /* silahkan ganti tulisan merah dengan link anda */
</ul>
</div>

Contohnya seperti tampilan di bawah ini.


Ganti tulisan merah sesuai petunjuk.
Silahkan edit bagian di bawah ini

.goblog-hovermenu ul li a{padding:2px 0.5em; text-decoration:none; float:left; color:black; background-color:#FE642E; border:2px solid #BDBDBD}

• text-decoration:none: anda dapat mengganti none dengan bold = cetak tebal, italic = cetak miring, dan underline = bergaris bawah
• float:left: anda dapat mengganti left dengan right = rata kanan, dan center = rata tengah
• color:black: anda dapat mengganti black dengan warna lainnya seperti yellow = kuning, blue = biru, brown = coklat. Atau anda dapat menggunakan kode warna, seperti: #000000 = hitam, #8A0808 = merah, #0B2161 = biru. Kalau anda ingin mengetahui lebih banyak kode warna, silahkan klik di sini
• background-color:#FE642E: Silahkan ganti #FE642E dengan warna yang anda inginkan.
• border:2px solid #BDBDBD: Anda dapat mengganti ketebalan garis pinggir dengan mengganti 2px menjadi 3px, 4px, 5px dan seterusnya. Silahkan ganti solid dengan ridge, inset, outset, double, dashes, dan dotted. Sedangkan #BDBDBD adalah warna garis pinggir. Anda dapat menggantinya dengan warna anda sendiri.

.goblog-hovermenu ul li a:hover{background-color:#886A08; border-style:outset}

• background-color:#886A08:  Anda dapat mengganti #886A08 dengan warna anda sendiri.
• border-style:outset: Ganti outset dengan ridge, inset, outset, double, dashes, dan dotted.

html>body .goblog-hovermenu ul li a:active{border-style:inset}

• border-style:inset: Ganti inset dengan ridge, inset, outset, double, dashes, dan dotted.

Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu
Ingat bahwa widget bukan hanya satu bentuk, dan anda dapat berkreasi sesuai dengan kreatifitas anda. Terima kasih dan jangan lupa komen yaaa......yyyyuuuuhhhuuuuuuu