Cara membuat Navigasi Horizontal

Pada blog lain yaitu zhafran blog saya mencoba membuat navigasi horizontal. Berikut ururtannya:

• Login blogger
• Pilih Desain 
• Kemudian tata letak 
• Setelah itu tambahkan gadget pada header
• Pada setingan HTML simpan kode dibawah ini:

 <style>
/*---------------------------------------------------------------------------------*/
/* CATEGORY MENU */
/*---------------------------------------------------------------------------------*/
#cat-menu { background:url(pop.png) no-repeat center top; height:35px;}
/* category navigation */
.nav { width:100%;z-index:99; float:left; margin:10px 0 0 0; padding:0px; list-style:none; line-height:1; height:35px;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;}
.nav a { position:relative; color:#999; 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, .nav li a:active, .nav li.current-cat, .nav li.current-cat-parent { background:none; color:#004276; text-decoration:underline;}
.nav li ul { background:#444; position:absolute;width:172px; margin:0px 0px 0px -2px; border:1px solid #333; border-width:1px 1px 0px; z-index:999; }
.nav li ul li {border-bottom:1px solid #333; border-right:none; }
.nav li ul li a { background:#444; width:147px; padding:7px 12px; color:#fff; font-size:11px; font-weight:normal; }
.nav li ul li a:hover { background:#f9f9f9; color:#004276; text-decoration:underline; }
.nav li ul ul { margin:-31px 0px 0px 171px; }
</style>
<div id='cat-menu'>
<ul class='sf-menu nav' id='cat-nav'>
<li><a href='/'>Home</a></li>
<li><a href='#'> Menu1</a></li>
<li><a href='#'> Menu2</a></li>
<li><a href=''# >Menu3</a></li>
<li><a href='#'> Menu4</a></li>
<li><a href='#'> Menu5</a></li>
</ul>                   
</div>

• Simpan perubahan dan lihat hasilnya.

Artikel Yang Terkait: