.tutorial #13 - enlarge image

.salam semua~

.dah lama rasanya tak buat tutorial .hehe~
.oke, kali ni nak ajar pasal enlargement image
.cuba click pic kat bawah ni

.teruja tak?
.magik kan kan kan?
.ekekekeke~
.senang je nak buat macamtu

1) .buka Layout - Edit HTML

2) .cari code </head> *cari guna CTRL+F*

3) .then, copy code kat bawah ni dan paste sebelum code </head> yang korang cari tadi

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

<script src='http://h1.ripway.com/hanatrg/jqeury magnifier.js' type='text/javascript'>

/***********************************************
* jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>


4) .then, Save :)

5) .benda ni buat sekali je, then tak payah buat lagik

*.:。✿*゚‘゚・✿.。.:* *.:。✿*゚’゚・✿.。.:* *.:。✿*

*yang ni wajib buat setiap kali post gambar dalam entry*

1) .upload pic seperti biasa time nak tulis entry baru .test dengan 1 pic dulu .kang kalau upload banyak-banyak kang, korang jugak yang pening @.@

2) .lepas upload, korang klik Edit Html, the delete code yang warna merah macam kat bawah ni

Contoh :

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_M0JVIpt_xtc/SsxFpD2tKzI/AAAAAAAAE3A/08aDGElFldA/s1600-h/DSC01782.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 240px;" src="http://4.bp.blogspot.com/_M0JVIpt_xtc/SsxFpD2tKzI/AAAAAAAAE3A/08aDGElFldA/s320/DSC01782.JPG" alt="" id="BLOGGER_PHOTO_ID_5389759425767353138" border="0" /></a>

3) .then code image korang akan jadi macam kat bawah ni

<img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 240px;" src="http://4.bp.blogspot.com/_M0JVIpt_xtc/SsxFpD2tKzI/AAAAAAAAE3A/08aDGElFldA/s320/DSC01782.JPG" alt="" id="BLOGGER_PHOTO_ID_5389759425767353138" border="0" /></a>

4) .then korang tambah class="magnify" magnifyby="5" di antara <img dengan style= .maknanya lepas korang tambah, ia akan jadi macamni

<img class="magnify" magnifyby="5" style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 240px;" src="http://4.bp.blogspot.com/_M0JVIpt_xtc/SsxFpD2tKzI/AAAAAAAAE3A/08aDGElFldA/s320/DSC01782.JPG" alt="" id="BLOGGER_PHOTO_ID_5389759425767353138" border="0" /></a>

5) .then it's done! .try publish entry korang .jadi ke tak .selamat mencuba! :)

CREDIT TO HANA TRG =)

UPDATE:
Boleh jugak refer tutorial dekat
Planet Pari-Pari!