Membuat Menu Horizontal Blog

Kali ini saya akan menulis tentang membuat menu di blogspot.Nanti bentuknya jadi seperti ini.

Sebenarnya banyak cara yang bisa dilakukan.Tapi kali ini saya mencoba cara yang mudah saja.

Langkah-langkah :

1. Login ke blogspot.Pilih menu desain.
2. Sebelum mengedit, buat dulu cadangan template agar jika terjadi kesalahan bisa me-restore blog kembali seperti semula.Klik 'cadangkan/pulihkan.'
3. Klik menu tata letak, lalu klik 'add gadget'

      4. Pilih opsi 'HTML/javascript.'
      5. Copykan kode 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>

6.  Ganti '#' dengan link yang anda inginkan.Bisa link label, posting, atau mengarah ke situs lain 

7.  Ganti menu 1, menu 2 dst sesuai dengan nama menu yang anda inginkan. 

8.  Klik 'Simpan' 

             Selamat mencoba, dan semoga berhasil...:)