Tab Menu Simple Tapi Cantik

ewah..ewah,tajuk entri kemain lagi kan..konpiden abis..hahaha..tapi betullah,bagi bui tab menu ini paling cantik pernah bui ada..^_^..so ,korang nak jugak tak..wah,ramainya yang angkat tangan..hihihi..ok,merapu x guna..jom belajar..

mula2,g DASHBOARD > TEMPLATE > EDIT HTML > PROCEED > TICK EXPAND WIDGET TEMPLATE

cari kod
]]></b:skin>

pastu copy kod ini

a.menutab {
background:url(URL BACKGROUND);
display: inline-block;
font: normal 10px 'Lucida Sans Unicode', Lucida Grande, sans-serif;
color: #000;
border: 2px solid #eee;
display: inline-block;
letter-spacing: 1px;
margin: 0 2px 0 0;
padding: 4px 9px;
text-transform: uppercase;
}
a.menutab:hover {
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
border: 2px solid #ccc;
background:#E6A9EC;
color:#fff;
}

dan paste di atas kod yang pertama tadi


URL BACKGROUND tu korang tukar dengan background yang korang suka k
#E6A9EC tu korang tukar ikut warna yang korang nak


ok,siap part ni..preview dulu,kalau takder apa2 error baru save template


sekarang part 2 pulak


g LAYOUT > ADD A GADGET > HTML/JAVA SCRIPT


copy kod ini dan paste di dalam ruang kosong tu yer (takyah letak tajuk kat widget tu yer)

<center>
<a class="menutab" href="URL LINK">TAJUK TAB</a>
<a class="menutab" href="URL LINK">TAJUK TAB</a>
<a class="menutab" href="URL LINK">TAJUK TAB</a>
<a class="menutab" href="URL LINK">TAJUK TAB</a>
<a class="menutab" href="URL LINK">TAJUK TAB</a>
</center>

dah letak semua URL LINK dan TAJUK TAB,korang bolehlah save..widget ni kena letak di atas header baru menjadi..

kadang2 kebanyakan template widget tu takder kat atas header,so kalau nak tambah ruang atas header tu korang tengok TUTORIAL TAMBAH RUANG ATAS HEADER ni..