Friday, September 23, 2016

Cara Membuat Gambar Berputar Sebelum Disentuh Mouse

Chat on Whatsapp

Trik Membuat Gambar Berputar Sebelum Disentuh Mouse dengan menggunakan CSS Hover Image ini memang paling sering dicari oleh sebagian banyak blogger yang ingin membuat blognya tampil lebih menarik. 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.

Cara Membuat Gambar Berputar Sebelum Disentuh Mouse

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 sebelum disentuh mouse.

DMCA.com Protection Status

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.

Previous
Next Post »

KASIH KOMENTAR DISINI

BLOGGER
DISQUS
Pilih System Komentar

No comments