Saturday, October 31, 2009

Image Magnify - Tutorial


Adakah anda pernah melihat kesan khas pada gambar yang terdapat dalam entri ini, Image Magnify - Test Mode

Bagi yang sudah mengikuti blog ini, aku tahu korang mesti tak sabar² hendak tahu kod untuk kesan itu kan,:). Dan untuk memenuhi janji, aku buat tutorial ini khas kepada semua. Diharapkan blog korang akan lebih menarik dengan kehadiran kesan khas ini.:)

Kalau anda masih baru dan rasa tidak faham sangat. Ini apa yang aku hendak tunjukkan.
PENTING: pastikan page untuk entri ini telah dibuka sepenuhnya, baru korang akan dapat lihat kesannya. So kena la tunggu sekejap bergantung kepada kelajuan internet korang.:)

Apabila sudah dibuka sepenuhnya, Cuba klik pada gambar di bawah..




Nampak bezanya berbanding gambar² biasa apabila anda klik kan.?

dan inilah tutorial yang anda tunggu²..:)


1) Copy code di bawah, kemudian letakkan di HTML/javascript dalam blog anda.
(Dashboard > layout > add page element > HTML/javascript )
Jika masih tidak jelas lagi, klik sini.

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

<script src="
http://www.yourjavascript.com/610310434009/unwanted86.blogspot.com.js" type="text/javascript">

/***********************************************
* Kod telah di'edit' oleh unwanted
* Pastikan notis ini tidak dibuang untuk menghargai kerja² edit yang dilakukan oleh unwanted
* -- Sharing Is Caring -- http://www.unwanted86.blogspot.com --
***********************************************/
</script>



2) Apabila sudah letak code tu, save sahaja seperti biasa..

Siap untuk bahagian letakkan kod asas..

Seterusnya, adalah kod yang anda perlu letakkan bersama dengan url gambar yang anda hendak post dalam blog..(kod asas tadi perlu letak sekali je. Kod bawah ini diperlukan untuk membuat kesan tersebut pada gambar.)

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



Keterangan :

  • url gambar disini : Masukkan url gambar.
  • 2 : Skala pembesaran. Bergantung kepada width dan height. Nilai lebih besar dari 1 akan membesarkan gambar, nilai kurang dari satu akan mengecilkan gambar contoh 0.5
  • 200 : Masukkan lebar gambar yang anda rasakan bersesuaian
  • 150 : Masukkan tinggi gambar yang anda rasakan bersesuaian



Untuk melihat contoh perbezaan skala,width, height, Sila klik gambar di bawah untuk melihat contohnya.

width=200, height=150, skala=2.5


width=150, height=110, skala=2


width=450, height=200, skala=0.5



Biasanya apabila anda sudah mencuba beberapa kali, anda kan tahu berapa nilai width, height, dan scale yang bersesuaian untuk blog anda..

-------------------------

Amacam, sudah menjadi belum kesan khas gambar ini pada blog anda.?
Aku tahu siapa yang sudah menjadi tu mesti tersenyum girang..ha3.

Kalau anda belum cuba lagi, baik anda cuba kerana trick ini jarang sangat aku jumpa kat internet. Dan korang pun jarang jumpa kan (entah² tak pernah jumpa.:).
So, jadilah antara blogger yang mempunyai trick yang unik berbanding orang lain.

Dan, apabila sudah mejadi..
Bukan masanya untuk simpan sorang² ye.
Bagitahu kawan² atau sesiapa sahaja yang ingin mengetahui.
Kerana ilmu yang ada untuk dikongsi, bukan disimpan.

Bukankah Sharing Is Caring..:)


Happy Blogging..:)


Suka entri ini.?

48 comments:

zaradgreat on October 31, 2009 at 11:47 AM said...

woo!!
akhirnye kuar gak tutorial nih
haha
tq2!
nanti nak try lah
:p

acap2405(1169) on October 31, 2009 at 3:57 PM said...

bro..
klau pix dari komputer macamaner...???
ader ke URL dier..???

kuyie on October 31, 2009 at 4:12 PM said...

hahaha...tibe2 ade muud nk wat tutor...biasa kalo nk wat tutor nih malas sket...tambah2 kalo tutor math, chemistry n etc...huahuahuahuah~

Melz on October 31, 2009 at 4:28 PM said...

acap : Ko kene pakai Photobucket , flickr , picasa etc...upload dulu dan amek url dia ;)

Neway thnx for sharing :)

acap2405(1169) on October 31, 2009 at 5:04 PM said...
This comment has been removed by the author.
.o r k e d. on October 31, 2009 at 8:20 PM said...

da tuka url.sila update ya (:

chipsmore on October 31, 2009 at 8:47 PM said...

ni tutorial ke?? hehe..

btw, i link u k ;)

acap2405(1169) on November 1, 2009 at 10:26 AM said...

bro..
dah jadik..
yahohoho..
thankz bro..
best arr blog nih..
huhuhu..
lwat arr nanti untuk usya..
hohoho

unwanted on November 1, 2009 at 12:23 PM said...

zaradgreat, try jangan tak try..:)

Melz, trima kasih untuk jawapan kepada pertanyaan acap.:)

.o r k e d., ok jap lagi aku update link.:)

chipsmore, klu bukan tutorial hendak letak nama apa lagi ek..:)

acap2405, tahniah.. kan dah jadi..:). jap aku nk p usya.:)

acap2405(1169) on November 1, 2009 at 2:26 PM said...

ader laa bro..
kat entri paling baru..
situ arrr..
hohohoho

NIZAM on November 1, 2009 at 3:15 PM said...

THANX FOR THE TUTORIAL

mello on November 3, 2009 at 6:33 PM said...

nice tutorial.. thanx!

unwanted on November 9, 2009 at 12:01 PM said...

sama²..:)

Mr. tercabut on November 28, 2009 at 1:45 AM said...

Mr. T tak paham la unwanted... : (
kod no 2 tue.. Mr. T dah masukan Link gmbr, pas tue... nak paste kat mana? bluurr r.. thanx..

shuko on December 15, 2009 at 1:02 AM said...

tQ abg unwanted86..byk tutorial yg aku dh cuba kt blog sndiri..

maria on January 31, 2010 at 4:08 PM said...

mohon untuk masukkan tutorial ni dalam blog saya...

Anonymous said...

bro..
x reti r wat..
bole spesifik lg x.?

Kct on February 2, 2010 at 10:59 AM said...

salam.. terima kasih byk2 sbb bg tutorial yg menjadi ni...

Anonymous said...

ajax memg best...

Anonymous said...

unwanted is terbaikkkk!

QieFLy si Dolce on April 23, 2010 at 1:25 AM said...

step 2 tu mcm susah la..mcm mana klu blog orang tu banyak pic so blogger tu kena edit setiap pic ker???

P U P U T on April 28, 2010 at 3:51 AM said...

alamak...jd mmg jd...cun banget...tp dia pop up plak..klu leh nak yg mcm atas tu..dia besarkan kat situ jgk..aku silap wat kat mana ek?

ati on May 4, 2010 at 6:37 PM said...

skang kat blogspot x yah upload kat photobucket.. bley direct upload dr komputer/camera.. so kalo url tuk tu x de ke.. maaf la soalan same cam acap tp sebab dulu mmg kene upload kt pb (etc) dulu baru leh masukkan kat blog.. skang ni x yah.. maybe awk ade yg update url tuk ini.. tenkiu..

Zira_Zay on May 5, 2010 at 2:55 AM said...

blog kamu amat menarik..:D

C.e.T.o.T on May 6, 2010 at 7:00 AM said...

salam... tak jadi la.... cuba tgk link ni.. xleh.. penat dah buat.. huwaaa

http://www.cetot.com/2010/05/baby-tight-brand-gap.html

naper die jadi git? die g kat blank page.. tulunn tulunnn

MasterJi said...

Cun bro... mmg cun... yang tak jd tu blh cuba.. kompom jadi...

MasterJi said...

Cun bro... mmg cun... yang tak jd tu blh cuba.. kompom jadi...

TQSM.. Moga murah rezeki kita...

C.e.T.o.T on June 27, 2010 at 1:22 PM said...

http://www.cetot.com/2010/06/vicany-vicany-khakis-quarter-girl.html

tak jadi, die kuar window lain la plak..camner ek

::Mastura:Zakaria:: on July 20, 2010 at 10:13 PM said...

x jadi pun..nape bila upload gambar die kuar class="magnify" data-magnifyby="2" style="width:200px; height:150px cursor: url(magnify.cur), -moz-zoom-in; " /> dengan gambar tu? xphm... kod asas dah letak..

rex_chame on July 22, 2010 at 10:27 AM said...

jadi dah..ye ye..

tity on July 25, 2010 at 1:07 AM said...

eh..dia besar x cntik mcm gmbr testing kt atas nun...dah main2 dgn no utk magnify tu ("2") tp x ubah apa2 pun..ke sy yg salah adjust.. :P

cloudarif on August 11, 2010 at 6:32 AM said...

kod yg no 2 tu nak paste katne??kat javahtml ke..kat new post??tak paham la..kod no 1 jer paham..yg no 2 nak paste katne??

@©hØy on August 17, 2010 at 9:32 AM said...

memang menarik bro saya dah buat, menjadi la .credit buat bro. t.q

dilakorea on October 25, 2010 at 2:36 AM said...

xjd pn..
tulun2..

.::: Princess MOMOY :::. on November 23, 2010 at 2:30 AM said...

untuk code no. 2 tu paste ktne?
kuar coding code

.::: Princess MOMOY :::. on November 23, 2010 at 2:41 AM said...

byk kali try untuk code no. 2 tp x jd
code no. 2 tu nk paste ktner
sgt2 blur

srikandi mie on December 1, 2010 at 12:01 PM said...

tak boley buat la yang nie,..image url tu ade kat photobucket ke,..?yang mana satu?

imizah on March 1, 2011 at 10:45 PM said...

thanks!! berjaya da. :)

Asma Ahmad on March 23, 2011 at 9:56 PM said...

klu wt gna pict dr komp sndri xleh eyh?? kna gna url gak??

Trainer Fariz on March 26, 2011 at 11:31 AM said...

OK SEMUA SAYA DAH DAPAT JAWAPAN KENAPA KORG TAK JADI....korang kene tambah kod sumthing pada akhir script(kod) tadi....saya nak tambah kod tu kat comment ni tapi die tak benarkan tulis kat sini...untuk sebarang masalah jumpe kat blog saya...saya ajar kod terakhir tu...tulis kat shout box saya untuk inform....saya akan membantu...

www.trainerfariz.blogspot.com

MeGaT aLaM sEnGkEtA on April 19, 2011 at 12:36 AM said...

salam

langkah kedua tu nk paste katne?
hukhuk

MeGaT aLaM sEnGkEtA on April 19, 2011 at 12:46 AM said...

da jadi

hehehe hahahahoyayayayyyy

that'ssoNurhi Dayah Mokhtadin on June 11, 2011 at 5:57 PM said...

kod akhir tu nak letak kat mane??

jual rumah jakarta selatan on July 17, 2011 at 4:35 PM said...

yang lagi mau jual kebun sengon mau bagi info nich tentang bibit jabon dan kayu jabon bagi yang suka bertani

jasa ekspedisi on July 17, 2011 at 4:35 PM said...

mampir nich dari jaksel

icaland pelangi petang on July 28, 2011 at 6:14 PM said...

toturial yg paling best.hehe.. tp aku tak cuba lagi.. sbb nampak mcam rumit sgt. kena cari masa lain yg lebih pjg.. utk try n error... try n berjaya. :)

Rizal Tanjung on August 1, 2011 at 9:18 AM said...

Ini harus saya coba dan digunakan. Sangat bermanfaat terutama bagi pemilik photo-blog.

Permodalan YPK on December 31, 2012 at 5:05 PM said...

second post tu nk letak kt mne ye?

Post a Comment

Setiap komen anda amatlah dihargai.:)

Banner X-Change

aizuddin.com

.

Related Posts with Thumbnails
 

Copyright 2008 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol dot com Edited by Unwanted