Cara Membuat Menu Horizontal (Part 2)

Sekarang saya coba membuat menu horizontal. Sebenarnya ini bukan yang pertama, yang pertama ada disini. Menu horizontal yang akan saya jelaskan adalah menu yang ada di blog ini. Untuk melihat menu, klik disini

Langsung saja, ini langkah-langkahnya :
1. Masuklah ke account blogger Anda
2. Pilih tata letak
3. Pilih Edit HTML
4. Cari code ]]></b:skin>, dan copy kan kode css ini tepat di atasnya

body {
font: 100% verdana, arial, sans-serif;
background-color: #fff
margin: 50px;
}
/* begin css tabs */
ul#tabnav { /* general settings */
text-align: left; /* set to left, right or center */
margin: 1em 0 1em 0; /* set margins as desired */
font: bold 11px verdana, arial, sans-serif; /* set font as desired */
border-bottom: 1px solid #6c6; /* set border COLOR as desired */
list-style-type: none;
padding: 3px 10px 3px 10px; /* THIRD number must change with respect to padding-top (X) below */
}
ul#tabnav li { /* do not change */
display: inline;
}
body#tab1 li.tab1, body#tab2 li.tab2, body#tab3 li.tab3, body#tab4 li.tab4 { /* settings for selected tab */
border-bottom: 1px solid #fff; /* set border color to page background color */
background-color: #fff; /* set background color to match above border color */
}

body#tab1 li.tab1 a, body#tab2 li.tab2 a, body#tab3 li.tab3 a, body#tab4 li.tab4 a { /* settings for selected tab link */
background-color: #fff; /* set selected tab background color as desired */
color: #000; /* set selected tab link color as desired */
position: relative;
top: 1px;
padding-top: 4px; /* must change with respect to padding (X) above and below */
}
ul#tabnav li a { /* settings for all tab links */
padding: 3px 4px; /* set padding (tab size) as desired; FIRST number must change with respect to padding-top (X) above */
border: 1px solid #6c6; /* set border COLOR as desired; usually matches border color specified in #tabnav */
background-color: #cfc; /* set unselected tab background color as desired */
color: #666; /* set unselected tab link color as desired */
margin-right: 0px; /* set additional spacing between tabs as desired */
text-decoration: none;
border-bottom: none;
}
ul#tabnav a:hover { /* settings for hover effect */
background: #fff; /* set desired hover color */
}

/* end css tabs */

5. Cari kode,

<div id='outer-wrapper'>
&ltdiv id='header-wrapper'>

blank...blank.. 

</div>

lalu buatlah kode seperti ini dibawahnya,

<div id='menu-horizontal'>
<ul id="tabnav">
<li class="tab1"><a href="URL Anda">Nama Tab Anda</a>&lt/li>
<li class="tab2"><a href="URL Anda">Nama Tab Anda</a></li>
<li class="tab3"><a href="URL Anda">Nama Tab Anda</a></li>
</ul>
</div>

6. Save Templates.

Pasti Jadi..hehehee..

Note : Anda dapat menambah tab, dengan cara membuat script ini  
<li class="tab4"><a href="URL Anda">Nama Tab Anda</a></li> dibawah tab yang ketiga dan begitu seterusnya..

Terima Kasih..