tutorial : cara nak buat TAB MENU simple macam shida | Jom cuba! | Dunia sebenar Shida tutorial : cara nak buat TAB MENU simple macam shida | Jom cuba!

Klik Banner untuk lebih lanjut (iklan berbayar) nak tempah? (klik sini)


Tuesday, 21 February 2012

tutorial : cara nak buat TAB MENU simple macam shida | Jom cuba!

   Assalamualaikum, peace upon you.
klik untuk tumbesaran~

ok seperti yang dijanjikan shida hari ni nak buat tutorial "cara nak buat tab menu simple" macam shida pakai sekarang. Caranya sangat-sangat mudah cuma ikut step ini ok :)

1. Login >> design >> editHTML >> tick expand widget >> cari kod ini : </b:skin>
dah jumpa kod diatas paste kod dibawah ni SEBELUM kod yang dicari tadi ok
untuk memudahkan pencarian kod dalam editHTML gunakan >> ctrl+F
 .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: #FFFFFF;
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 #F778A1 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: #F778A1;
padding-top: 9px;
padding-bottom: 5px;
color: white;
}

.invertedshiftdown .current a{
background-color: #F778A1;
padding-top: 9px;
padding-bottom: 5px;
}
ok bila korang dah paste kod tadi, bagi tulisan yang shida boldkan dengan warna biru, korang boleh tukar warna-warna kesukaan korang ok. boleh intai kod-kod warna disini > HTMLCOLOR bila rasa dah sesuai semua warna boleh ikut step seterusnya :)
Bahagian ini juga boleh letak image untuk tampak lebih menarik cuma ubah kod ini >  background-color: #FFFFFF; kepada ini > background: url(url background);

2. cari pula kod ini >> <div id='crosscol-wrapper' >
dah jumpa?? korang paste pula kod dibawah ini dan isi semua yang diperlukan seperti link-link yang hendak dijadikan TAB MENU ok.

<div class='invertedshiftdown'>
<ul>
<li><a href='LINK'>NAMA 1</a></li>
<li><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;'/>

ok dah selesai paste korang letakkan link korang dibahagian "LINK" dan juga nama link tersebut dibahgian "NAMA" . Kalau rasa tak cukup tab menu tu korang cuma copy kod yang sama dan buatlah berulang-ulang sehingga cukup pakai ok. Tak faham boleh tanya shida. Rasa dah cukup dan siap semuanya korang boleh PREVIEW dulu sama ada jadi atau tak. Mesti jadi punya lah ok :) dah puas hati boleh SAVE!

Selamat mencuba ^_^





11 Jari Ohsem:

b0an said...

waa..dah ade tuto ni..haha..

zareliqa afiqa said...

Nice tuto! :)

laskar pelangi said...

nak try nanti.dah lama nak buat menu kat atas tu..tp tak menjadi2..ehek3

Muhammad Saiazuan Norhalik said...

nice tutorial.. simple :D

Azhafizah[フィザ] said...

best tuto ni ^__^

C'Jai said...

tutorial nk wat kotak yg ada kod tu bergerak bila di lalukan cursor camana plak shida...:-))

Cik Azizah said...

jijah suka buat menu tab ni..

shida jijah nak tahu menu tab yg boleh panjang ke bawah tu..cmner shida??

Bui Junaidi said...

NANTI KAK BUI NK TRY,TP TGGU BETUL2 ADA MASA DULU..*__*

-SUPERGIRL- said...

thanks for the TUTO kak shida :)

HannaNabiella said...

knpe kite xbuley pown??ate nye URL error

-meeSUPERGIRL- said...

mee baru buat yg neh pulak . hehe ..