Cuppylicious

Tutorial : Cara buat efek zoom pada image dalam post - Efek 1

Khamis, 17 Mei 2012 | 12:33 PG | 0 budak suka cupcake + pink

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/AVvXsEjmlymdM_grp1y80dd69Spn-0CeM1QiyFbb9epLgc0bZztOLpCRRyzZ1b8Uqy-m8Fyt88we23CV2xNazMpiIfWctqTaBPOJfL4M5JyepIL5FkSAoFviKhgXwTI_uXMlbUFOhd-rK5_All0/s400/040.gif" class="magnify" data-magnifyby="2" style="width:130px; height:130px cursor: url(magnify.cur), -moz-zoom-in; " />

Annyeonghaseyo earthlings~ I am an alien. Follow this blog yaw! So, you can always visit my tutorial~

Edited : Amirra Najihah
Photo : We♥It
Tutorial : Jom Bina Belog
Best Viewed : Google Chrome