Cara buat efek 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 cuba pada gambar di atas (letak kursor mouse di atas gambar) hanya ikut beberapa langkah yang sangat mudah di bawah.

Langkah 1

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

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 mesej 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)


{ 14 comments.. read them below or add one }

akuanakpahang akuanakpahang 4:27 PM
TQ cantik juga tu :)
Thalhah Amir Thalhah Amir 12:35 AM
mcm mana yer sy nk kontek nescafe? huhu
Thalhah Amir Thalhah Amir 1:06 AM
@Nescafe ais 2kar nama apa da skang? xjumpa cari la. huhu
LegendOfPersia LegendOfPersia 1:38 AM
TQ berkesan..tp gambar jadi blur kenape erk??
Ummie Ummie 10:00 AM
tq.. info yg sgt berguna bg sy...
jamilah jamilah 11:56 PM
x larat nak buat laa....x jadi..
sueLeira sueLeira 11:07 PM
thanks,menjadi la :)
Rudy Hartono Rudy Hartono 11:39 PM
makasih infonya sangat bermanfaat sekali, nice posting
soyabean gebu soyabean gebu 10:55 AM
hai..nak tanya kalau blog jenis yang dynamic view mcm mana plak yer.dh cuba tapi x menjadi.mintak tolong tunjuk ajar..
Derick Derick 6:34 PM
Thank you bro...
Artikelnya bagus, ditunggu kunjungan baliknya ya...
dxuz96.blogspot.com