Cara Mudah Membuat Gambar Berputar Pada Blog

Cara Membuat Gambar Berputar Saat Disentuh Mouse - Selamat datang sahabat blogger, mungkin bagi anda yag ingin membuat tampilan blog anda lebih kelihatan keren disini saya akan kembali memberikan salah satu trik yang bisa anda gunakan, yaitu membuat gambar berputar hingga 360 derajat. Hal ini akan memberikan kesan yang lebih menarik karena gambar akan terasa lebih hidup dengan menggunakan CSS Hover Image ini memang paling sering dicari oleh sebagian banyak blogger yang ingin membuat blognya tampil lebih menarik.

Saya sendiri pernah menggunakan Trik ini, namun karena blog ini banyak hal yang saya bahas mengenai tutorial saya rasa kurang pas karena agak mengganggu pembaca saat memahami gambar yang saya sajikan. Terkait dengan cara membuat gambar bergerak di website untuk lebih jelasnya mengenai tampilannya anda bisa lihat [ DEMO]

    Baca juga:

    1. Cara Membuat Kotak Kode HTML Di Postingan
    2. Cara Merubah Warna Sub Menu Dropdown Tamplate Evo Magz
    3. Cara Mudah Menambah Menu Multi Dropdown di Blogger
    4. Cara Membuat Website Menjadi Aplikasi Android Tanpa Koding

Silahkan anda arahkan crusor anda ke salah satu gambar yang ada, maka akan timbul efek gambar berputar seperti yang saya maksud. Bagaimana? apabila anda tertarik dengan membuat gambar berputar pada blog anda bisa mengikuti langkah - langkah yang akan saya sajikan berikut ini.

Cara Membuat Gambar Berputar Saat Disentuh Mouse

Seperti yang saya katakan diatas,  Cara membuat gambar berputar pada blog ini menggunakan CSS Hover Image yang bisa anda gunakan untuk mempercantik tampilan blog anda. Berikut langkah - langkahnya:
1. Silahkan anda masuk ke akun Blogger anda
2. Setelah masuk ke dashbord blogger anda lanjut ke >> Tema >> Edit HTML
3. Pada cpanel blog lalu cari kode </head>, Untuk lebih mudahnya silahkan anda tekan CTRL+F
4. 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>

5. Setelah anda pastekan CSS diatas silahkan anda klik Save
6. Selesai

Sekarang silahkan anda lihat tampilan blog anda, arahkan crusor anda ke gambar yang ada, entah itu di postingan maupun gambar yang lainnya, seharusnya sekarang gambar yag ada pada blog ada sudah mau berputar ketika disentuh crusor.

Kode di atas berfungsi untuk membuat Annimation Hover pada semua Gambar yang ada pada body, seperti gambar didalam postingan, Popular Post, Recent Post dan yang lainnya. Anda juga bisa mengatur kecepatan dan rotasi gambar sesuai dengan keinginan anda

Peutup: Itulah Cara Mudah Membuat Gambar Berputar Pada Blog yang bisa anda lakukan dengan menerapkan CSS Hover Image. Selamat mencoba, apabila ada yang kurang dipahami silahkan anda bertanya pada kolom komentar. Terimakasih

🌐 Baca Juga

seconds.

⚠ Ikuti Kami di Blogger dan Google News Dan Dapatkan 1 Buah Smartphone dari Sponsor jika Beruntung‼

• 2comment

Mr.Surya

TEACHER | BLOGGER | CONTEN WRITER

Related Posts

BLOGGING