by
Comments
TITLETITLETITLETITLE
Assalammualaikum.
Pagi ini aku berbesar hati nak kongsikan dengan korang satu lagi toturial. Aku nak ajar korang buat Navigation with Hover. Hope korang enjoy.
1) Layout > Add a gadget > Edit Html/Javascript
2) Copy code di bawah.
<style>
.nav a{
background:#eee;
display:inline-block;
width:105px;
font:10px trebuchet ms;
margin:5px;
border:1px solid #e6e6e6;
text-align:center;
color:#858585;
text-decoration:none;
text-transform:uppercase;
letter-spacing:1px;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.nav a:hover {
border-radius:10px;
box-shadow: inset 60px 8px 0px 0px #000, inset -60px -8px 0px 0px #000;
color:#fff;
}
</style>
<div class="nav">
<div style="text-align: center;">
<a href="PASTE YOUR LINK HERE">TITLE</a><a href="PASTE YOUR LINK HERE">LINK</a><a href="PASTE YOUR LINK HERE">TITLE</a><a href="PASTE YOUR LINK HERE">TITLE</a><a href="PASTE YOUR LINK HERE">TITLE</a><a href="PASTE YOUR LINK HERE">TITLE</a>
</div>
</div>
3) Pastekan diruang html/javascript tadi.
4) Save.
*warna merah tu, sila tukar ye.
Assalammualaikum.
Pagi ini aku berbesar hati nak kongsikan dengan korang satu lagi toturial. Aku nak ajar korang buat Navigation with Hover. Hope korang enjoy.
1) Layout > Add a gadget > Edit Html/Javascript
2) Copy code di bawah.
<style>
.nav a{
background:#eee;
display:inline-block;
width:105px;
font:10px trebuchet ms;
margin:5px;
border:1px solid #e6e6e6;
text-align:center;
color:#858585;
text-decoration:none;
text-transform:uppercase;
letter-spacing:1px;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.nav a:hover {
border-radius:10px;
box-shadow: inset 60px 8px 0px 0px #000, inset -60px -8px 0px 0px #000;
color:#fff;
}
</style>
<div class="nav">
<div style="text-align: center;">
<a href="PASTE YOUR LINK HERE">TITLE</a><a href="PASTE YOUR LINK HERE">LINK</a><a href="PASTE YOUR LINK HERE">TITLE</a><a href="PASTE YOUR LINK HERE">TITLE</a><a href="PASTE YOUR LINK HERE">TITLE</a><a href="PASTE YOUR LINK HERE">TITLE</a>
</div>
</div>
3) Pastekan diruang html/javascript tadi.
4) Save.
*warna merah tu, sila tukar ye.
2 Ulasan
good sharing OM . :) berguna ni .
BalasPadamYeah itu dia OM!>_<
BalasPadamSila tinggalkan comment korang disini!