Sabtu, 08 Mei 2010

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

3 komentar:

Rizkyzone mengatakan...

kalau punya q dah bawaan dari template sob

search engine seo mengatakan...

Postingan yang bagus, terima kasih atas infonya

Education Blog mengatakan...

bang kode kelimanya gk ketemu ketemu

Posting Komentar

Komentar Anda sangat berarti

>

Guestbook Rolling Widget

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Grants For Single Moms