Tuto: Tab Menu #1

contoh tab menu

Langkah pertama
Dashboard-design-edit HTML (tick Expand Widget Templates)
kemudian letak code dibawah sebelum ]]></b:skin>

.invertedshiftdown{
padding: 0;
width: 100%;
border-top: 1px solid #FFFFFF;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;

}
.invertedshiftdown ul{
margin:0;
margin-left: 40px;
padding: 0;
list-style: none;
}

.invertedshiftdown li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

.invertedshiftdown a{
background-color: color code;
float: left;
display: block;
font: bold 12px Arial;
color: black;
text-decoration: none;
margin: 0 1px 0 0;
padding: 5px 10px 9px 9px;
border: solid #F7BE81 1px;
-moz-border-radius-bottomright: 1em; -moz-border-radius-topleft: 1em;
-moz-border-radius-bottomleft: 1em; -moz-border-radius-topright: 1em;

}


.invertedshiftdown a:hover{
background-color: #F6E3CE;
padding-top: 9px;
padding-bottom: 5px;
color: white;
}

.invertedshiftdown .current a{
background-color: #F6E3CE;
padding-top: 9px;
padding-bottom: 5px;


}

** Perkataan yang diwarnakan korang boleh tukar ikut selera korang.

background-color: color code; tu korang boleh juga tukar dengan background: url(URL BACKROUND);



langkah kedua

<div class='invertedshiftdown'>
<ul>
<li><a href='LINK'>NAMA 1</a></li>
<li class='current'><a href='LINK'>NAMA 2</a></li>
<li><a href='LINK'>NAMA 3</a></li>
<li><a href='LINK'>NAMA 4</a></li>
<li><a href='LINK'>NAMA 5</a></li>

</ul>
</div>
<br style='clear: both;'/>

Dah edit segala bagai buh code atas tuh dibawah perkataan <div id='crosscol-wrapper' >
**untuk memudahkan keje korang ctrl F tuk cari perkataan <div id='crosscol-wrapper' >


Akhir sekali, Preview dan jika takde mesej Error, klik Save