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

---