Membuat Gambar Header Berputar Saat Disentuh Cursor

Membuat Gambar Header Berputar Saat Disentuh Cursor – Dalam posting pertama tentang Desain Blog ini, kita akan membahas tutorial desain pada bagian header, yaitu membuat gambar header berputar saat disentuh cursor. Anda dapat melihat contoh dari penerapan efek gambar header berputar saat disentuh cursor pada gambar header blog ini (Update: live demo di blog ini sudah tidak berlaku lagi).

Efek gambar header berputar saat disentuh cursor ini hanya menggunakan kode CSS saja, dan pada penerapannya sangat mudah, bahkan orang yang masih dapat dikategorikan “newbie” saja dapat menerapkannya. Pastikan terlebih dahulu blog Anda telah menggunakan header gambar, karena efek gambar berputar ketika disentuh cursor ini tidak akan ada efeknya apabila Anda menggunakan header tulisan.

1. Kunjungi Dasbor > Template > Edit HTML.

2. Cari kode ]]></b:skin>. Jika sudah ketemu, letakkan kode CSS berikut 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;

}

3. Simpan Template.

Untuk mengujinya, silakan kunjungi blog Anda dan dekatkan kursor mouse ke gambar header tersebut. Jika gambar header blog Anda sudah berputar 360°, maka Anda sudah sukses menerapkan efek gambar berputar saat disentuh cursor ini. Semoga bermanfaat…

Tweet