Cara Membuat Menu Navigasi Blogpsot

Meski sudah menyatakan aktif diblogdetik tapi aku juga kadang masih main-main diblogspot. Terakir kemarin bikin blog baru, terus ditambah-tambah menu navigasi gitu. Untuk kode html-nya dikasih sama teman pesbuk sih. Kebetulan aku minta kode templatenya eh dikasih juga kode untuk nambahin menu navigasinya. Kalo untuk blogku yang ini kan sementara pakai template bawaan dari blogspot dan itu menu home sama infonya pasang dari page dari fasilitasnya blogger. Terus bagaimana cara membuat menu navigasi blogspot seperti pada gambar diatas? Contoh untuk membuat menu navigasi seperti gambar diatas adalah tinggal menambahkan kode digadget baru.


Kode yang ditambahkan adalah seperti dibawah ini:

<style>
/*---------------------------------------------------------------------------------*/
/* CATEGORY MENU */
/*---------------------------------------------------------------------------------*/
#cat-menu { background:none; height:35px;}
/* category navigation */
.nav { background:#f5f5f5;width:100%;z-index:99; float:left; margin:5px 0 10px 0; padding:0px; list-style:none; height:35px;}
.nav a { position:relative; color:#555; display:block; z-index:100; text-decoration:none; }
.nav li { float:left; width:auto; border-right:1px solid #d9d9d9; }
.nav li a { font:bold 11px/15px Arial,serif; padding:10px 12px; text-decoration:none; text-transform:uppercase; }
.nav li a:hover{ background:#333; color:#fff; text-decoration:underline;}</style>
<div id='cat-menu'>
<ul class='sf-menu nav' id='cat-nav'>
<li><a href='/'>Home</a></li>
<li><a href='#'> Menu 1</a></li>
<li><a href='#'> Menu 2</a></li>
<li><a href='#'> Menu 3</a></li>
<li><a href='#'> Menu 4</a></li>
<li><a href='#'> Menu 5</a></li>
</ul>
</div>

Taruh kode diatas digadget posisi atas bawah judul blog. Gampang kan?

salam hormat dariku,

@mbak_widha