Cara buat efek zoom pada image dalam post - Efek 1

Cuba klik gambar di bawah:

Apabila diklik, gambar tersebut akan auto zoom in dan zoom out. Dan yang menariknya, cara zoom in dan zoom out ini mempunyai kesan khas yang menakjubkan. Ikuti tutorial di bawah untuk mengaplikasikan trick ini pada blog anda:

1) Sign in akaun blogger anda

2) Dashboard > Design > Page Element > Add a gadget > Html / Javascript

3) Copy paste kod di bawah pada ruang Html / Javascript tadi

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

<script src="
https://sites.google.com/site/jombinabelogefekzoom/jombinabelog-efekzoom.js" type="text/javascript">

</script>

4) Save

Untuk langkah seterusnya:

1) New post > buka tab Edit Html (sebelah compose)

2) Letak kod di bawah bersama dengan url gambar yang anda hendak post nanti (pastikan anda letak kod ini pada ruang edit html, bukan compose):
<img src="url gambar di sini"

class="magnify" data-magnifyby="2" style="width:200px; height:150px cursor: url(magnify.cur), -moz-zoom-in; " />

Nota:

url gambar di sini - url gambar anda
200 dan 150 - saiz lebar dan tinggi gambar

contoh:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGEkVqhi5Jl_a5CeA8h6Q3CrHp7ZO1nvOp-GQhwLmuDml1gAwjRSPKTZ0r-ZAhhyphenhyphena9XFOIKayKu5hXsYqcl5iDeP9A5jnPIXAvKw0qSZa7GM5rAFotP8-JtI8SJ90tyoAmUYH-HVVxPeg/s400/040.gif" class="magnify" data-magnifyby="2" style="width:130px; height:130px cursor: url(magnify.cur), -moz-zoom-in; " />