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 comments
waa..dah ade tuto ni..haha..
ReplyDeleteNice tuto! :)
ReplyDeletenak try nanti.dah lama nak buat menu kat atas tu..tp tak menjadi2..ehek3
ReplyDeletenice tutorial.. simple :D
ReplyDeletebest tuto ni ^__^
ReplyDeletetutorial nk wat kotak yg ada kod tu bergerak bila di lalukan cursor camana plak shida...:-))
ReplyDeletejijah suka buat menu tab ni..
ReplyDeleteshida jijah nak tahu menu tab yg boleh panjang ke bawah tu..cmner shida??
NANTI KAK BUI NK TRY,TP TGGU BETUL2 ADA MASA DULU..*__*
ReplyDeletethanks for the TUTO kak shida :)
ReplyDeleteknpe kite xbuley pown??ate nye URL error
ReplyDeletemee baru buat yg neh pulak . hehe ..
ReplyDeleteSegala komen-komen yang telah disiarkan adalah tanggungjawab sepenuhnya ke atas penulis itu sendiri. Pemilik blog tidak akan bertanggungjawab jika berlaku sebarang permasalahan berkaitan dengan komen yang disiarkan. Mana-mana komen yang berbentuk iklan, mengandungi link/url yang mencurigakan, mengandungi kata-kata maki hamun yang tidak menyenangkan tidak akan disiarkan. Harap Maklum dan Terima Kasih.