Cara Membuat Efek Zoom Pada Gambar Postingan Blog - Hampir semua Blogger selalu berupaya untuk membuat dan menampilkan blog mereka secara baik dan menarik. Salah satu yang dilakukan untuk membuat blog tampil menarik adalah dengan memberi efek zoom pada gambar, yaitu gambar akan membesar saat disentuh kursor.
Keuntungan menerapkan efek membesar pada gambar postingan blog adalah Anda tidak perlu memasang gambar dalam ukuran besar di setiap postingan artikel blog Anda, karena gambar akan membesar secara otomatis saat disentuh kursor pengunjung. Berikut ini cara membuat efek zoom pada gambar postingan blog Anda :
1. Login ke blog Anda.
2. Pada menu navigasi, klik "Tema", kemudian klik "Edit HTML".
3. Pada area html tema, cari dan temukan kode ]]></b:skin>. Untuk mempermudah pencarian, gunakan tombol Ctrl+F di keyboard komputer Anda. Pada kolom pencarian, tuliskan kodenya kemudian Enter.
4. Copy script dibawah ini, pastekan tepat diatas kode ]]></b:skin>
.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);
}
Untuk efek zoom berputar pada gambar blog, gunakan kode berikut ini !
.post img{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}.post img:hover{-o-transform:scale(1.2) rotate(360deg) translate(0px);-moz-transform:scale(1.2) rotate(360deg) translate(0px);-webkit-transform:scale(1.2) rotate(360deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}}
5. Setelah selesai menempatkan script, klik "Simpan Tema".
6. Selesai dan lihat hasilnya.
Itulah Cara Membuat Efek Zoom Pada Gambar Postingan Blog yang bisa Anda lakukan. Semoga bermanfaat.
Share artikel... !
