Saturday, December 22, 2012

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


3 comments:

outbound malang said...

kunjungan gan , bagi-bagi motivasi
semoga menjadi semangat .. :)
Hanya mereka yang berani gagal dapat meraih keberhasilan
ditunggu kunjungan baliknya yaa :) terima kasih ..

Kin Naz said...

menjadi kak. Tenkiu kak

LELA COLLECTION said...

kat mana nak cari URL BACKGROUND tu akak..??