Sabtu, 01 Agustus 2015

Hover Shake Di Avatar/Photo Profil Comment Blog

Hai reader(s)..
Kali ini aku akan share tutorial cara agar foto profil/avatar comment bisa bergerak.
Yuk langsung saja, follow me step by step!

 Login ke akun blog kamu atau klik disini!
 Dashboard > Template > Edit HTML
 Cari kode di bawah ini dengan menggunakan CTRL+F
/* Comments
 Lihat di bawahnya, pasti ada kode seperti ini:
.avatar-image-container img{
 Sudah jumpa kan?? Copy kode di bawah ini, dan letakkan setelah kode di atas tadi!
-webkit-transition: 2.0s;-moz-transition: 2.0s;}
.avatar-image-container img:hover{
-webkit-animation-name: shake;-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
}
@-webkit-keyframes shake /* Safari and Chrome */
{
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
 Hingga telihat seperti kode di bawah ini!
.avatar-image-container img{
-webkit-transition: 2.0s;-moz-transition: 2.0s;}
.avatar-image-container img:hover{
-webkit-animation-name: shake;-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
}
@-webkit-keyframes shake /* Safari and Chrome */
{
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
 Save dan lihat hasilnya!

note:
Untuk jaga-jaga agar template blog kamu tidak rusak, silahkan duplicate kode template kamu dulu.
Caranya copy semua kode template kamu dan pastekan di notepad/ms.word.

SELAMAT MENCOBA!
GOOD LUCK!

Terimakasih sudah membaca , Tinggalkan komentarnya juga ya

1 komentar:

-Mohon berikan komentar anda dengan menggunakan bahasa yang sopan.
-Jika ingin repost, silahkan cantumkan namaku dan link blogku.

Related Posts Plugin for WordPress, Blogger...
 
This Blog Are Protected By Me . DO NOT OPEN MY PAGESOURCE . Designed by -Nur Irdina Zakaria- and Re-Designed by -DILA AZHARI-
...