Beberapa waktu yang lalu, Santos Blog pernah mengulas mengenai cara membuat efek goyang pada gambar postingan blog ketika disentuh. Jika anda sudah bosan, anda bisa menggantinya dengan efek lain pada gambar tersebut, salah satunya yaitu dengan memberi efek zoom (membesar) ketika gambar tersebut terkena kursor mouse (pada versi web) atau disentuh tangan (pada versi mobile).
Selain membuat blog jadi tampak lebih unik, tampilan efek zoom ini juga memberi manfaat bagi pembacanya. Mereka jadi lebih mudah memahami maksudnya ketika mendapati gambar yang terlalu kecil. Efek ini juga memudahkan pembaca untuk melihat detail suatu gambar pada sebuah postingan tanpa harus mengkliknya. Sentuhan kursor mouse atau tangan yang mengarah pada gambar tersebut akan membuat gambar membesar sehingga gambar akan terlihat menjadi lebih jelas.
Apakah cara penerapannya sulit?. Tenang saja, kita hanya akan menambahkan kode CSS pada html template blog. Lebih lanjut silahkan ikuti langkah-langkah di bawah ini.
Cara Memberi Efek Zoom Pada Gambar Postingan Ketika Disentuh
1. Buka akun blogger anda.
2. Pilih menu tema dan klik edit html.
3. Terlebih dulu cari kode ]]></b:skin> atau </style>
4. Kalau sudah ketemu, silahkan gunakan kode CSS di bawah ini:
.post img:hover {
-o-transition: all 0.9s;
-moz-transition: all 0.9s;
-webkit-transition: all 0.9s;
-moz-transform: scale(1.7);
-o-transform: scale(1.7);
-webkit-transform: scale(1.7);
}
Atau gunakan kode berikut ini:
.post img:hover { -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -moz-transform: scale(1.3); -webkit-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); }
Silahkan pilih salah satu dari kode di atas, terserah yang mana, kemudian letakkan kode tersebut di atas kode ]]></b:skin> atau </style>
5. Simpan kembali template anda.
Silahkan lihat dan tes hasilnya. Apakah gambar postingan ketika disentuh tiba-tiba membesar (zoom)?.
Saya memang tidak memasangnya di blog ini, jadi anda bisa mencobanya sendiri di blog anda. Kalau tidak suka atau sudah bosan, anda tinggal hapus lagi saja kodenya. Demikian tutorial kali ini. Semoga bermanfaat.
Posting Komentar