twitterfacebookgoogle pluslinkedinrss feedemail

Senin, 22 Juli 2013

Membuat Efek Zoom Pada Gambar Posting

Rasanya jika tampilan blog hanya teks itu membosankan. Oleh sebab itu perlu juga ada gambar atau foto di blog supaya mata bisa betah dan tertarik untuk melihat blog kita. Baik gambar yang digunakan sebagai ilustrasi postingan atau gambar yang dijadikan banner dan dipasang di sidebar.

Gambar selain bisa menjadi hiasan bisa juga menjadi pendukung dari tulisan kita. Blog sebagai salah satu media sosial yaitu untuk menuangkan ide pikiran dan pengalaman bisa lebih menarik. Salah satunya dengan membuat efek-efek pada gambar yang ada di blog.

Dulu pernah kita pelajari cara membuat efek mouseover. Sekarang kita akan belajar membuat zoom effect atau efek perbesar. Jadi ini adalah cara membuat efek pada gambar yang disentuh oleh mouse otomatis akan zoom atau diperbesar. Untuk membuat zoom effect ini tidaklah sulit, langsung saja simak langkah-langkahnya.

Cara Membuat Zoom Effect pada Gambar di Blog
1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Jangan lupa centang Expand Template Widget
4. Cari kode ]]></b:skin> lalu taruh kode berikut ini diatasnya:


.post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.3); -o-transform: scale(1.3); -webkit-transform: scale(1.3); }

5. Simpan Template jika sudah selesai.

0 komentar:

Posting Komentar