Tutorial - Cara Buat Efek Zoom In Pada Image Di Bahagian Blog Post

Jom ikut tuto nih ;-)

Langkah 1

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

Langkah 2

Tekan 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 efek 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)