Cara Membuat Menu Horizontal Di Blog

Assalamualaikum gan, kali ini ane mau ngajarin  gimane caranye bikin menu yang kayak di blog ana ini. Kebetulan ana dapat informasi dari tetangga sebelah haha. Oke langsung aja ya check this out.


Langkah-langkah Membuatnya :

1. Baca bismillah gan wkwk
2. siapin camilan dulu, kopi atau
3. log in ke akun blogger agan
4. nah pilih tab rancangan > add gadget > HTML/JAVASCRIPT
5. masukkin kode ini gan :

<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. klik simpan

7. tarik gadget ini ke atas di tab header, maka akan muncul diatas seperti blog saya hehe

Catatan Si Unyil, Usro dsb :

ganti tanda pagar ( # ) pada kode <a href='#'> dengan link yang teman inginkan, bisa link label, postingan, atau link yang mengarah kesitus lain.
Silakan ganti tulisan Menu 1 - Menu 5 dengan nama menu yang teman inginkan.

Semoga Berhasil Gan ! Semangat :)