MEMBERI EFEK ZOOM GAMBAR PADA POSTINGAN BLOG

Efek-efek yang menarik tentunya akan menjadi nilai tersendiri dari tampilan blog kawan. Akan tetapi efek-efek yang terlalu banyak atau terlalu rumit juga akan mempengaruhi proses loading blog dan memberatkan kinerja browser kawan sekalian. Akan tetapi, jika hanya memberi efek-efek ringan pada blog tidak akan begitu mempengaruhi proses loading dan kinerja browser kawan. Salah satunya ialah menggunakan efek zoom gambar,

maksudnya ialah pada saat kursor kawan diarahkan kepada gambar, maka gambar dalam postingan blog kawan akan ter-zoom secara otomatis. Contohnya bisa kawan-kawan coba dengan gambar dibawah ini, coba kawan arahkan kursor kawan kepada gambar dibawah ini :

Ter-zoom bukan.. :)

Jika kawan-kawan tertarik untuk mencobanya, maka kawan-kawan sekalian dapat mengikuti langkah berikut ini :

1. Masuklah ke TEMPLATE
2. Pilih EDIT HTML
3. Demi keamanan, alangkah baiknya kawan-kawan membackup kode HTML kawan, dengan cara mengcopy semua kode tersebut dan simpan di komputer kawan sekalian dalam bentuk file Notepad. Hal ini perlu dilakukan agar jika suatu saat terjadi kesalahan, kawan-kawan dapat mengembalikannya seperti semula dengan mengcopy kode yang dibackup tersebut ke blog kawan.
4. Setelah dibackup, maka carilah kode berikut :

]]></b:skin>

5. Setelah ketemu, pastekan kode berikut :

.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); }

Tepat di atas kode yang dicari tadi.

6. Setelah itu SIMPAN.
7. Lihatlah hasilnya dengan membuka salah satu postingan kawan yang ada gambarnya, coba arahkan kursor kawan ke gambar tersebut, ter-zoom bukan? :)

Baiklah, cukup disini saja tutorial sederhana dari saya, semoga artikel ini dapat membantu kawan sekalian.
Jangan lupa komentar dan share-nya ya.. :)