Tutorial Magnify Gambar

Tutorial ni bagi menjawab soalan dari YanaMIB bagi menjawab soalan aku. Aku tak tau pasal autopost sebab sebelum ni aku pakai post editor yang lama. Bagi sesiapa yang tak tau, post editor lama tak ada autopost, cuma updated post editor je yang ada (ke aku sorang je yang tak tau ni) 

gambar yang sebelah atas adalah post editor yang baru, yang sebelah bawah plak yang lama. Aku tau mesti ada yang masih pakai editor yang lama, tak ramai pon mesti ada sikit yang guna. 

updated editor

editor lama

updated post editor ni lagi senang dan lagi banyak kelebihan. Kalau sesiapa yang masih pakai post editor lama  kalau nak tukar ikut step ni

Dashboard > Setting > Basic > scroll ke bawah nnt jumpe macam kat bawah ni > klik updated editor > save setting 

Ok sekarang kita akan mulakan tutorial MAGNIFY GAMBAR (rasa macam cikgu plak) 

1 - Mula-mula korang kene copy and paste html kat bawah ni.

(Dashboard > layout > add page element > HTML/javascript )

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><br /> <br /> <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>


*kod ni cume perlu letak sekali, dan jangan dibuang. Kalau tak nanti tak boleh magnify image


2 - Kod kat bawah ni pulak kene letak untuk setiap gambar yang korang nak magnify.

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


* ruang "url gambar disini" adalah untuk url yang gambar akan diupload
* data-magnifyby="2" merujuk kepada berapa kali ganda anda nak magnify.
width dengan height tu pilih ikut sukehati nak besar mana. Kebanyakan gambar aku kalau yang menegak aku cume ubah width jadi 300. Kalau gmbar melintang ubah width jadi 400


SOALAN LAZIM : 
1 - mana nak dpt url gambar?
2 - nak paste code kedua ni dekat mana?


JAWAPAN


Soalan 1- Upload gambar macam biasa. Ke ade yang tak pernah upload gambar? Tak kan la nak kene buat tutorial upload gambar gak. Melampau la tu.

 Bila dah upload. Besarkan jadi original size dulu. Supaya kalau magnify nanti gambar tak pecah-pecah

bila tumbesaran gambar berjaya. Right click pastu pilih "copy image url". URL ni la yang nak dipaste ke dalam code html dalam ruang "url gambar disini"


Soalan 2 - Pergi ke tab edit html, sebelah compose. Paste je code yang yang ke dua tu kat situ. Kalau da masukkan url gambar, korang bleh g balik ke compose.


Kalau YanaMIB pejam mata jawab soalan aku, aku bersengkang mata nak buat tutorial ni.. Haha

SEMUA NI AKU BLAJA KAT SINI : BLOG TUTORIAL

UPDATE : ANDA BOLEH PASTE CODE NI SEBAGAI POST TEMPLATE. SUPAYA SETIAP ENTRI BARU YANG NAK DITAEP NANTI DAH ADA CODE NI. TAK PAYAH NAK BUKAK TUTORIAL NI TIAP KALI NAK COPY CODE..

SETTING > FORMATTING > POST TEMPLATE (paste kat sini)

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

Kalau ada yang tak paham kat mana-mana part sila tanye. First time buat tutorial ni. Takut ada yang tak paham. Atau kod yang aku bagi tu tak boleh gune. Korang pergi la ke link blog tutorial kat atas ni untuk copy code html