Tutorial Bina Blog: Cara buat efek zoom pada image dalam post

Lihat preview di bawah:

Apabila mouse over, gambar tersebut akan auto zoom in dan zoom out. Berbeza sedikit dengan efek yang sebelum ini di mana kali ini efek gambar adalah dalam bentuk clear. 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"

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod

<head>

4) Kemudian copy dan paste kod di bawah SELEPAS / DI BAWAH kod <head> yang anda cari dalam langkah 3 tadi

<style>
.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-webkit-transform: scale(1.2); }
</style>

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

Selamat mencuba! :)

Special: