Membuat Efek Zoom Pada Gambar

Selamat malam dan salam blogwalking semuanya.

Kali ini saya akan membahas tentang Membuat Efek Zoom Pada Gambar, Efek ini berfungsi pada gambar ketika kursor berada di atas gambar maka dengan otomatis gambar tersebut akan membesar dengan sendirinya.

Mari kita langsung menuju ke Trik Membuat Efek Zoom Pada Gambar.

Langkah 1
Login ke blog sobat.

Langkah 2

Pilih menu "Rancangan"" --> "Edit HTML".

Langkah 3

Kemudian centang pada box "Expand Template Widget".

Langkah 4

Carilah kode ]]></b:skin>, untuk mempersingkatnya gunakan fasilitas ctrl + f dan jika sudah ketemu, copy dan pastekan kode dibawah ini tepat diatas kode ]]></b:skin>.

.hovergallery img{-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-o-transform:scale(0.8);-webkit-transition-duration:0.5s;-moz-transition-duration:0.5s;-o-transition-duration:0.5s;opacity:0.7;margin:0 10px 5px 0}.hovergallery img:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);box-shadow:0px 0px 30px gray;-webkit-box-shadow:0px 0px 30px gray;-moz-box-shadow:0px 0px 30px gray;opacity:1}

Langkah 5

Simpan Template Anda

Langkah 6

Untuk memasukkan efeknya pada gambar maka copy-pastekan kode berikut pada postingan atau widget yang dimana sobat ingin menaruh gambar yang akan diberi efek. Berikut kodenya:

<div class="hovergallery"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZG6QhIY39AP80hr8k7mW1twynAdHvSdxbKyy4AgVHLEwF1fWCT1b6E4CbFbsIFcFryWTJN-9IQZXT6raIi_r2Edf02h6j0JL6CgfcbCn1vNCawefy1AGTP84IpXQ59r_kmblF4e3dfCk/s320/Budi+daya+ikan+belut+sukses.png" alt="Keterangan Gambar" title="Cultivation Fish Eels" /> </div>

Langkah 7

Ganti kode yang bercetak warna merah dan tebal dengan URL gambar sobat. Tulisan yang berwarna Biru ganti sesuka anda keterangan apa yang kamu mau, sedangkan yang berwarna Orange, anda ganti dengansesuka anda mau dikasik title apa gambarnya.

Langkah 8

Lihat hasilnya sempurna..