CARA MEMBUAT EFEK ZOOM OTOMATIS PADA GAMBAR ARTIKEL YANG DI POSTING DI BLOG

Dalam tutorial kali ini saya akan membagikan ilmu tentang bagaimana cara membuat zoom otomatis pada gambar yang di posting di blog sobat. zoom pada gambar ini berfungsi untuk memperbesar tampilan gambar / foto yang sudah kita posting di blog, ini berlaku untuk semua gambar yg ada di artikel blog sobat.

Kelebihan yang kita dapatkan saat memasang zoom efek pada gambar ini adalah terlihat lebih menarik dan profesional. cara kerja dari zoom efek gambar ini adalah  gambar akan membesar ketika cursor visitor blog sobat menyentuh gambar - gambar yang berada di postingan blog sobat (Lihat Demo nya dibawah ini ). kode untuk membuat gambar ini murni menggunakan css tanpa ada tambahan javascript atau jquery, sehingga tidak mempengaruhi pada page loading blog sobat.

DEMO

Adapun cara membuat agar gambar efek zoom gambar di blog adalah sebagai berikut:

1. salin / copy kode berwarna merah  dibawah ini terlebih dahulu

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

}

2. Selanjutnya masuk ke akun blogger sobat.

3. Lalu pilih Edit HTML

4. Selanjutnya cari kode ]]></b:skin>  (gunakan ctrl + F untuk menemukannya)

5. Jika sudah ditemukan , selanjutnya pastekan kode diatas yg berwana merah tepat diatas kode 

    ]]></b:skin>  tersebut.

6. Selanjutnya Simpan Template. 

Silahkan lihat hasilnya di blog sobat. demikian posting saya kali ini, semoga dapat bermanfaat. salam blogger.