Efek Zoom Berputar pada Gambar. Pada kesempatan ini sepeser.com akan berbagi tutorial tetang cara membuat efek hover zoom berputar pada gambar di postingan blog. Kita bisa menyebutnya sebagai penambahan efek hover zoom yang memberikan efek agar gambar terzoom dan berputar saat disorot pointer mouse.
Untuk penerapannya sendiri cukup mudah, kamu tinggal meletakkan perintah CSS ke dalam tema blog. Fungsi gambar dalam sebuah tulisan dalam hal ini posting blog adalah selain membagikan informasi mengenai topik postingan, juga bisa menambah daya tarik suatu halaman postingan blog di mata pengunjung.
Kamu bisa menyajikan gambar pada blog kamu dengan tampilan yang semenarik mungkin, dengan menerapkan efek hover pada gambar diharapkan akan membuat penampilan blog menjadi lebih keren dan menarik. Membuat efek seperti ini di blog membuat kesan tersendiri bagi pengunjung.
 |
| Efek Zoom Berputar |
Efek Hover Zoom Berputar
Efek zoom berputar pada gambar ini akan muncul saat kursor mouse diarahkan pada gambar di postingan blog kita. Tapi tidak menjadi jaminan semua pengunjung akan suka pada efek ini, mungkin ada beberapa yang kurang suka dan yah mungkin saja ada yang suka.
Sebelumnya juga admin sudah berbagi cara membuat efek salju terbaru dan cara membuat efek loading blog sederhana juga tentang membuat indikator persen saat scroll artikel di Blogger. Berikut adalah cara membuatnya di Blogger:
Cara 1: Membuat Efek Hover Zoom Berputar Pada Gambar di Tema Blogger
1. Di Blogger, pilih blog kamu
2. Pilih menu Tema 👉 Edit HTML
 |
| edit html |
3. Letakan kode di bawah ini di atas kode
]]></b:skin>#sepeser img{padding:8px; box-shadow:0 0 3px #333;-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;}#sepeser img:hover{padding:4px; -o-transform: scale(1.3) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.3) rotate(360deg);border-radius:50%;}4. Untuk menerapkannya pada postingan blog:
 |
| Tampilan HTML |
Pada mode Tampilan HTML contoh kodenya adalah seperti di bawah ini:
<div id="sepeser"><div style="text-align: center;"><a href="http://www.sepeser.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtClMPrUEPcbsLEH7JU6vyRzyDHQ2pAwmrWz6ACx_mtRnI5weh_l_3UeXrEx2_RTqCQ-pY5MiAG8zP-MwuX1yWf_yuvWACsjpS_xBl1QeyPkgvhpic3JwL8JUC6OhP3MLor9e_EP9Iqqa9MdgfI0wjIcJDXYnf09p6boYpMTFHh2A3ho0MoWH1zu5a_O0/s300/contoh-efek-hover-zoom-berputar.jpg" height="250" width="250" /></a></div></div>Untuk kode berwarna biru di atas adalah url gambar, silahkan ganti dengan gambar yang kamu inginkan.
5. Publikasikan artikel dan lihat hasilnya.
Video di bawah ini buat kamu yang masih kebingungan bagaimana cara membuatnya di Blogger, karena mungkin kamu masih baru dalam dunia blog.
Video Tutorial
Kelebihan dari cara yang pertama di atas adalah kamu bisa memilih dan menentukan gambar mana yang kamu inginkan memiliki efek hover ini, jadi tidak semua gambar memiliki efek hover. Cara yang ke-2 di bawah ini lebih mudah cara pemasangannya, dan otomatis akan membuat semua gambar di postinganmu memiliki efek hover ini.
Cara yang ke-2 ini pastinya lebih mudah cara membuatnya, karena kamu tinggal copy dan pastekan kodenya ke widget html, maka semua gambar yang ada di postinganmu otomatis memiliki efek hover ini. Lebih mudah karena kamu tidak perlu kesulitan mengedit gambarmu satu persatu untuk menyisipkan tag div.
Cara 2: Memasang Efek Hover Berputar Pada Gambar di Widget Blogger
1. Di Blog kamu di Blogger 😄
2. Pilih menu Tata Letak ➜ Tambahkan Gadget 👉 HTML/JavaScript
3. Masukan kode di bawah ini:
2. Pilih menu Tata Letak ➜ Tambahkan Gadget 👉 HTML/JavaScript
 |
| HTML / JavaScript |
3. Masukan kode di bawah ini:
<style>.post-body img{padding:5px; box-shadow:0 0 3px #333;-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;}.post-body img:hover{ padding:15px; box-shadow:0 0 15px #000; -o-transform: scale(0.9) rotate(360deg); -moz-transform: scale(0.9) rotate(360deg); -webkit-transform: scale(0.9) rotate(360deg);border-radius:50%; }</style>4. Save atau simpan
Sekarang cek gambar di postingannmu, bagaimana mudah bukan? bagi sebagian Bloggers pasti akan mencoba menggunakan cara yang ke 2 karena lebih mudah dan simple.
Menambahkan efek-efek pada blog, tentu saja ini bagi kamu yang tidak masalah akan kecepatan loading blog, tapi efek css seperti ini tidak akan berpengaruh bagi kecepatan blog. Nah sekian artikel untuk saat ini dan jangan lupa lihat artikel terbaru lainnya.
0 Komentar untuk "Cara membuat Efek Zoom Berputar pada Gambar di Blog"