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

by - 15:21:00

   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 ^_^





You May Also Like

11 comments

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

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

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

    ReplyDelete
  4. jijah suka buat menu tab ni..

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

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

    ReplyDelete
  6. knpe kite xbuley pown??ate nye URL error

    ReplyDelete
  7. mee baru buat yg neh pulak . hehe ..

    ReplyDelete

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