Tutorial Menu Tab Hover Part 3

Tuesday, September 13, 2016

ASSALAMUALAIKUM | SALAM SEJAHTERA

Kali ni tuto menu tab adalah untuk menu tab sepertimana dalam gambar di bawah. Atau utk lebih jelas klik kat PREVIEW HERE di bawah tu. Lebih kurang mcm aku punya. Sbb kat bawah ni kod menu tab aku sebenarnya tp yg lama. Cuma aku punya padding yg sekarang punya ni aku kecikkan sikit.



Pergi kat Layout. Kemudian klik Add A Gadget. Klik pada HTML/Javascript dan paste code di bawah. Letak html ni dekat bahagian Add A Gadget bawah header okay. Bukan kat sidebar.
<style>
a.nav {
display:inline-block;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
padding:10px;
width:100px;
text-decoration:none;
font-family:calibri;
font-size:16px;
height:20px;
text-transform:uppercase;
color: #000;
background: #CDE9CA;
border: 4px solid #FC9D9A;
border-radius:10px;
text-align:center;
cursor:vertical-text;
}
a.nav:hover{
color: #fff;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
background:#A0CAB5;}
</style>
<a class="nav" href="URL ANDA">TAJUK</a>
<a class="nav" href="URL ANDA">TAJUK</a>
<a class="nav" href="URL ANDA">TAJUK</a>
<a class="nav" href="URL ANDA">TAJUK</a>
<a class="nav" href="URL ANDA">TAJUK</a>
<a class="nav" href="URL ANDA">TAJUK</a>

KUNING : WARNA BACKGROUND BAHAGIAN DALAM MENU TAB
OREN : WARNA BORDER
AQUA : WARNA BACKGROUND BAHAGIAN DALAM MENU TAB SELEPAS KITA HALA KAN CURSOR
URL ANDA : TUKAR URL KORANG NAK LETAK
TAJUK : TUKAR KEPADA TAJUK IKUT KESUKAAN KORANG. CONTOH ABOUT ME, TIPS DLL

KOD WARNA BOLEH RUJUK SINI

Apa-apa pertanyaan tanya di ruang komen yaa. Tataa!



Share This Story

Tags:

You Might Also Like

5 COMMENT

  1. Sha Mohamed14 September 2016 at 10:58

    Nice sharing Rai..

    ReplyDelete
  2. Nana Liena31 December 2016 at 17:39

    salam rai,nak tanya kenapa tak dapat center ya? dah letak center pun masih ke kiri..huhu

    ReplyDelete
  3. Unknown19 March 2017 at 20:16

    Thanks Rrai for sharing :)

    ReplyDelete
  4. Mardhiyyah Rosli30 March 2017 at 21:48

    terima kasih. akhirnya dapat buat juga.

    ReplyDelete
  5. Cik Shafiqa25 April 2019 at 16:42

    hai, asalamualaikum. Izin guna tutorial dan code ni ye :) anyway thankyou for the sharing, sangat bermanfaat.

    ReplyDelete

Penghantaran sebarang komen, permintaan, cadangan ATAU komunikasi lain yg lucah, sumbang, palsu, mengancam ATAU negatif dengan niat untuk menyakiti hati, menganiayai, mengugut ATAU mengganggu orang lain dengan ATAU tanpa mendedahkan identitinya adalah suatu kesalahan boleh didenda tidak melebihi 58 ribu ringgit atau dipenjarakan selama tempoh tidak melebihi 1 tahun ATAU kedua-duanya sekali.