Tutorial Membuat Zoom Gambar Secara Otomatis Pada Blog

Depok, On The Spot Lovers Selamat Sore Sobat OTS Lovers, Sore ini saya akan berbagi tips tentang: Tutorial membuat Zoom Gambar secara Otomatis pada blog sobat secara sederhana. Cara ini berguna untuk membuat gambar pada postingan blog menjadi lebih jelas (Melalui Zoom Otomatis) ketika kursor mengarah ke gambar postingan sobat.

Langsung aja saya berikan langkah- langkahnya:

1.Log in terlebih dahulu ke akun Blogger sobat

2. Jika sudah, Klik Tema/ Templete , lalu klik Edit HTML

3. Maka akan masuk ke dalam Script template sobat. Setelah itu tekan CTRL+F (Berguna Untuk mempercepat mencari script) secara bersamaan pada keyboard sobat, Ketikkan Script ]]></b:skin> . Untuk lebih jelasnya bisa melihat gambar di bawah ini:

4. Setelah kode ]]></b:skin> ditemukan copas script/koding dibawah ini tepat di atas kode  ]]></b:skin> . Seperti contoh pada gambar di bawah ini:

.post 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 2px 2px 0;

}

.post img:hover{

-webkit-transform:scale(1.1);

-moz-transform:scale(1.1);

-o-transform:scale(1.1);

opacity: 1;

}

5. Klik simpan jika sudah melakukan copas script sesuai petunjuk di atas. Sobat bisa melihat hasilnya langsung.

Sekian tutorial dari saya semoga informasi yang saya bagikan berguna bagi sobat Blogger semua :)

Sumber: Zoom Gambar Secara Otomatis Pada Blog