Tuesday, 31 July 2012

Efek senget apabila cursor menyentuh link





Caranya:

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod


a:hover {


4) Kemudian copy paste kod di bawah selepas kod a:hover { yang korang cari tadi:


 transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);


contoh:
a:hover {
transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);


5) Sekali lagi, dengan menggunakan ctrl + F, cari kod di bawah pula:

a:link {
6) Kemudian copy paste kod di bawah selepas kod a:link { tadi:


transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;


 Contoh:

a:link {
transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;




7) Klik preview, jika tiada error, klik save dan lihat hasilnya.

Selamat mencuba! :)

 * efek ini hanya berkesan pada browser mozila firefox 

No comments:

Post a Comment