Membuat Efek Zoom Gambar di Blog

     Membuat Efek Zoom Gambar di Blog - Sesuai dengan judulnya, kali Maen Blogging ingin berbagi trik bagaimana cara membuat efek zoom pada gambar di blog. Dengan tutorial ini, gambar yang ada di blog anda, terutama di postingan akan memiliki efek zoom ketika kursor diarahkan ke gambar tersebut. Sebetulnya banyak juga blog yang membahas tentang trik yang satu ini, namun Maen Blogging selalu ingin memberikan cara yang termudah agar sobat blogger bisa mengaplikasikannya dengan mudah di blog kalian.

OK gak usah bicara panjang lebar, berikut langkah2nya :

• Buka akun blog anda
• Pilih Template - Edit HTML - Lanjutkan
• Jangan lupa centang Expand Template Widget
• Letakkan kode berikut diatas kode ]]></b:skin> 

.zoom:hover {-moz-transform:scale(1.25); -webkit-transform:scale(1.25); }

• Simpan 
• Kemudian untuk penulisan kode gambarnya, anda bisa tambahkan script/kode berikut (kode ditulis dalam mode HTML bukan mode Compose, bisa dilihat dibagian kiri atas) 

 <img src="http://link-gambar.jpg" class="zoom"/>

Contoh :

Gambar pertama tidak ditambahkan kode class="zoom"

Gambar kedua sudah ditambahkan kode class="zoom"

Jika mouse pointer diarahkan ke gambar di atas maka efek zoom akan timbul

Keterangan :

Anda bisa mengatur efek zoom nya (lebar dan tingginya) ketika pointer di arahkan ke gambar, caranya dengan menambahkan kode berikut :

<img src="http://link-gambar.jpg" height="nilai-tinggi" width="nilai-lebar" class="zoom"/>

ubah nilai tinggi dan nilai lebar sesuai keinginan anda