Cara membuat Gambar Header Berputar saat di sentuh Cursor

Pertama, buka edit template. Caranya: Login ke blogger.com kemudian pilih Template >> Edit Template, beri tanda centang pada "Expand Template Widget".
Demi keamanan template anda jika terjadi galat, silahkan back up template terlebih dahulu.
Cari kode ]]></b:skin>dan letakkan kode berikut ini tepat diatas kode tersebut.

#header img:hover {
-moz-transform: scale(1) rotate(-360deg) translateX(0px) translateY(0px) skewX(0deg)skewY(0deg);
-webkit-transform: scale(1) rotate(-360deg) translateX(0px) translateY(0px) skewX(0deg)skewY(0deg);
-o-transform: scale(1) rotate(-360deg) translateX(0px) translateY(0px) skewX(0deg)skewY(0deg);
-ms-transform: scale(1) rotate(-360deg) translateX(0px) translateY(0px) skewX(0deg)skewY(0deg);
transform: scale(1) rotate(-360deg) translateX(0px) translateY(0px) skewX(0deg)skewY(0deg);
-webkit-transition: all 600ms ease-in-out;
-moz-transition: all 600ms ease-in-out;
-ms-transition: all 600ms ease-in-out;
-o-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}

Sebelum disave, sebaiknya pratinjau terlebih dahulu apakah terjadi masalah atau tidak, jika template tidak mengalami masalah, klik simpan.
Demikian tutorial membuat gambar header bergerak saat disentuh cursor, Semoga bermanfaat.

Share :

Tweet

✚

Related Post