Tutorial : Cara buat effect Zoom in pada image di bahagian blog post

Untuk membuat efek zoom in pada image atau gambar di bahagian posting seperti contoh yang boleh anda DI SINI  (letak kursor mouse di atas gambar) hanya ikut beberapa langkah yang sangat mudah di bawah.

Langkah 1

Log in blog => Dashboard => Template => Edit HTML

Langkag 2

Dengan menggunakan keyboard, tekan kekunci F3 atau Ctrl+F. Seterusnya taip atau paste kod           

]]></b:skin> pada ruang Find dan kemudian tekan Enter.

Langkah 3

Salin dan paste kod di bawah di atas atau sebelum kod ]]></b:skin>

.post img {

filter:alpha(opacity=60);  /* Internet Explorer */

opacity:0.6;  /* standard CSS3 */

-o-transition: all 0.5s;

-moz-transition: all 0.5s;

-webkit-transition: all 0.5s;

}

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

}

Contoh:

.post img {

filter:alpha(opacity=60);  /* Internet Explorer */

opacity:0.6;  /* standard CSS3 */

-o-transition: all 0.5s;

-moz-transition: all 0.5s;

-webkit-transition: all 0.5s;

}

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

}

]]></b:skin> 

Akhir sekali, klik Preview dan jika tiada error, klik Save.

p/s: Jika effect  zoom in menjadi terlalu besar atau kecil, anda boleh mengubah saiz efek tersebut dengan menukar nilai 0.3s dan (1.3) kepada 0.5s dan (1.5)