Simple and cool Menu Tab
Monday, August 26, 2019 • August 26, 2019
0 exotics
Hello everyone ! so today i'm gonna show you how to make a cool menu tab like this :
Haa perasan tak menu tab tu akan berubah warna hitam bila kena cursor ? cool kan?
Cara dia mudah je, korang kena ikut step bt step ok ?
Mula-mula, kena buat page dulu tau. Contohnya, About Me, Tips, Tutor dan sebagainya. Sekarang baru buat menu tab.
1. Dashboard > Layout >crosscoll (Add a gadget) > HTML/Javascript.
2. Copy code bawah ni dan paste dekat dalam kotak tu. (cara copy tekan CTRL + C )
<center><a class="menutab" href="URL BLOG UOLLS">Home</a>
<a class="menutab" href="URL PAGE ABOUT ME">About Me</a><a class="menutab" href="URL PAGE TIPS">Tips</a><a class="menutab" href="URL PAGE TUTOR">Tutor</a></center>
penting ! :
OREN : URL blog dan blog page korang.
UNGU : Perkataan yang korang nak letak dalam menu tab.
Kalau nak tambah Menu Tab lagi, tambah je code bawah ni betul-betul sebelum </center> :
<a class="menutab" href="URL PAGE ABOUT ME">About Me</a>
3. Save!
Belum siap lagi lah. Sekarang macam mana nak cantikkan dia? Okay ikut step ni.
1. Template > Edit Html.
2. Tekan Ctrl+F serentak untuk cari code ni :
]]></b:skin>
3. Dah jumpa? Copy code ni. Paste kan dekat ATAS code
]]></b:skin> tadi.
a.menutab {
border:1px solid #ebebeb;
text-transform:uppercase;
background:#fff;
text-decoration:none;
color: #666;
padding: 6px;
font: 8px yow;
margin-left: 5px;
margin-right: 5px;
-webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; text-decoration:none;
box-shadow:inset 0px 0px 0px #FBF8E0,
inset 0px 0px 0px #FBF8E0;
display: inline-block;
width: 65px;
}
a.menutab:hover {
-webkit-transition-duration: 0.5s;
box-shadow:inset 0px 14px 0px #000000,inset 0px -14px 0px #000000; color: #fff;
}
PENTING ! :
MERAH : Warna yang korang nak. Boleh tengok sendiri, kalau tulis border means warna border, kalau tulis background means warna background menu tab. Pandai2 la pilih warna yang korang suka okay !
HIJAU : boleh tukar solid/dashed/dotted
4. Preview dulu. Kalau dah puas hati, boleh lah SAVE . Kalau tak boleh tu means ada yang code mana2 tertinggal, boleh cek semula.
Simple and cool Menu Tab
Monday, August 26, 2019 • August 26, 2019
0 exotics
Hello everyone ! so today i'm gonna show you how to make a cool menu tab like this :
Haa perasan tak menu tab tu akan berubah warna hitam bila kena cursor ? cool kan?
Cara dia mudah je, korang kena ikut step bt step ok ?
Mula-mula, kena buat page dulu tau. Contohnya, About Me, Tips, Tutor dan sebagainya. Sekarang baru buat menu tab.
1. Dashboard > Layout >crosscoll (Add a gadget) > HTML/Javascript.
2. Copy code bawah ni dan paste dekat dalam kotak tu. (cara copy tekan CTRL + C )
<center><a class="menutab" href="URL BLOG UOLLS">Home</a>
<a class="menutab" href="URL PAGE ABOUT ME">About Me</a><a class="menutab" href="URL PAGE TIPS">Tips</a><a class="menutab" href="URL PAGE TUTOR">Tutor</a></center>
penting ! :
OREN : URL blog dan blog page korang.
UNGU : Perkataan yang korang nak letak dalam menu tab.
Kalau nak tambah Menu Tab lagi, tambah je code bawah ni betul-betul sebelum </center> :
<a class="menutab" href="URL PAGE ABOUT ME">About Me</a>
3. Save!
Belum siap lagi lah. Sekarang macam mana nak cantikkan dia? Okay ikut step ni.
1. Template > Edit Html.
2. Tekan Ctrl+F serentak untuk cari code ni :
]]></b:skin>
3. Dah jumpa? Copy code ni. Paste kan dekat ATAS code
]]></b:skin> tadi.
a.menutab {
border:1px solid #ebebeb;
text-transform:uppercase;
background:#fff;
text-decoration:none;
color: #666;
padding: 6px;
font: 8px yow;
margin-left: 5px;
margin-right: 5px;
-webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; text-decoration:none;
box-shadow:inset 0px 0px 0px #FBF8E0,
inset 0px 0px 0px #FBF8E0;
display: inline-block;
width: 65px;
}
a.menutab:hover {
-webkit-transition-duration: 0.5s;
box-shadow:inset 0px 14px 0px #000000,inset 0px -14px 0px #000000; color: #fff;
}
PENTING ! :
MERAH : Warna yang korang nak. Boleh tengok sendiri, kalau tulis border means warna border, kalau tulis background means warna background menu tab. Pandai2 la pilih warna yang korang suka okay !
HIJAU : boleh tukar solid/dashed/dotted
4. Preview dulu. Kalau dah puas hati, boleh lah SAVE . Kalau tak boleh tu means ada yang code mana2 tertinggal, boleh cek semula.
