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 bismilah dulu teman kalok perlu baca surat yasin wkwkwkkw
2. Sholat dulu teman J
3. log in aj kebloger anda
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 :

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.