Apabila mouse over, gambar tersebut akan auto zoom in dan zoom out. Ikuti tutorial di bawah untuk mengaplikasikan trick ini pada blog anda:
1) Sign in akaun blogger anda
2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHlV8sBwEOq0Z3qO55CUkwnD491jxp5hCZnWy6BRqp-b2nzz9CP3Je5mPrfFSY4fKUTRORQwDmxbvp3Aa5dYfeE2Z8r5-W5qeGVjtJXfUzGk9yGPZu0f9OxEd0p27tWY7-AzwwmTvhyphenhyphenfc/s400/expand.png)
]]></b:skin>
4) Copy paste kod di bawah sebelum kod ]]></b:skin> yang anda cari dalam langkah 3 tadi
.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, rupa kod anda akan kelihatan seperti ini:
.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>
5) Akhir sekali, klik Preview dan jika tiada error, klik Save.
Selamat mencuba! :)
Special:
2 komen budak comel:
npe xjdi ea??
amazing..jadik la...cantik.Gmabar blog kecik. Bila buat cmni dpt tgk gmbr besar ckit. Tq..nt jom tgk blog kite www.butikbajubaby.co ye
Post a Comment