Saya sendiri ingin sekali menggunakan trik hover image didalam blog ini, tapi setelah saya coba berfikir lebih matang lagi, ternyata trik hover image ini tidak cocok dengan konsep yang sedang saya bangun dalam blog ini.
Apakah kamu punya pendapat yang sama dengan saya tentang Hover Image ini?
Karena Menurut saya, Hover Image atau gambar berputar sebelum diklik oleh mouse ini, tidak berperan penting dalam meningkatkan kualitas konten maupun Seo onpage.
Tapi jika kamu ingin menggunakan trik ini, silahkan ikuti langkah-langkah dibawah ini.
- Langkah Pertama, pastikan kamu sudah login kedalam cpanel blog kamu ya
- Selanjutnya kamu buka EDIT HTML pada cpanel blog lalu cari kode </head>
- Setelah itu Salin CSS Hover Image dibawah ini dan letakkan tepat diatas kode </head> tadi.
<style type='text/css'>
body img{
-webkit-transition: -webkit-transform 1.1s ease-in-out;
transition: transform 1.1s ease-in-out;
}
body img:hover{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>Kode di atas berfungsi untuk membuat Annimation Hover pada semua Gambar yang ada pada body, seperti gambar didalam postingan, Popular Post, Recent Post dll
Sebagai contoh, kamu bisa lihat semua gambar dalam halaman ini termasuk pada header dan widget sidebar. Letakkan Mouse pada gambar dan kamu akan langsung melihat secara langsung bahwa gambar pada postingan kali ini sudah disisipkan trik membuat gambar berputar saat disentuh mouse.
Atau teman-teman bisa coba tempatkan cursor mouse diatas logo Header Kang Wira.
Sekian dulu Tutorial tentang Cara Membuat Gambar Berputar Sebelum Disentuh Mouse.
Semoga Bisa dipraktekan pada blog kamu yah. Apabila ada pertanyaan, jangan segan untuk berikan komentar pada menu isi komentar dibawah ini.
