TUTORIAL Menu Tab Hover
Monday, February 01, 2016
Assalamualaikum | Salam Sejahtera
Tuto kali ini adalah untuk buat menu tab hover mcm aku punya. Nampak tak bawah header tu? Haa yang tu la. Mcm dalam gambar kat bawah ni. Menu tab ni simple je. Nampak kemas gitew blog uols sbb dia tak guna ruang yang banyak pun. Saiz dia pun tak besar sangat dan tak kecik sangat.
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{
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:5px;
display:inline-block;
text-align:center;
background: #AED4BF;
color:#FFFFFF;
width:130px;
padding:2px;}
a.nav:hover{
color: #fff;
background: #9F8668;
-moz-box-shadow: inset 0 0 5px 5px #EBD6FF;
-webkit-box-shadow: inset 0 0 30px 30px #EBD6FF;
box-shadow: inset 0 0 30px 30px #EBD6FF;}
</style>
<center>
<a class="nav" href="URL LINK">TAJUK</a>
<a class="nav" href="URL LINK">TAJUK</a>
<a class="nav" href="URL LINK">TAJUK</a>
<a class="nav" href="URL LINK">TAJUK</a>
<a class="nav" href="URL LINK">TAJUK</a>
<a class="nav" href="URL LINK">TAJUK</a>
</center>
URL LINK dan TAJUK tu kalian ubah ikut url blog kalian dan tajuk yang sesuai.
Yang warna purple tu untuk warna. Sila ubah ikut kesesuaian warna blog masing-masing yaa. Boleh tgk kod warna tu kat SINI
4 COMMENT
Rrai, jadi dah. tq =D
ReplyDeleteHana guna HTML/JavaScript tu je hehe anyway thanks for sharing :)
ReplyDeleteSaya nak bookmark dulu , jap nnt sy belajar k... hehe
ReplyDeletetq yunk menjadi
ReplyDeletePenghantaran 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.