Wadah Madrasah Pengalaman: tutorial "gambar membesar bila cursor menyentuh gambar korang"


Saturday, August 28, 2010

tutorial "gambar membesar bila cursor menyentuh gambar korang"





.








Salam Korang..


Hari nie wan nak Wat tutorial "gambar membesar bila cursor menyentuh gambar korang"


Law nak contoh...try arahkan cursor korang ke gambar Wan kat bawah nie....




Dah try.....


Ok..Law korang nak wat



Jom Tutorial



Bagi penguna template blogger and layout

Dashboard>Layout/template blogger/design>Edit HTML

kemudian klik pada Expand Widget Templates..tekan CTRL+F pada keyboard dan copy paste code di bawah ini ke ruangan find

cari kod </head>


</head>


(CTRL+C serentak untuk copy)


Bagi penguna template

Dashboard > Template

Cari kod </head>


Tekan CTRL+F pada keyboard dan copy paste code di bawah ini ke ruangan find

</head>

(CTRL+C serentak untuk copy)





Law da jumpa


korang copy kod kat bawah nie pastekan diatas </head>


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

<style type='text/css'>
border: none;
vertical-align: top;
}
</style>
<script src='http://sites.google.com/site/masdoyoksite/javascript/masdoyokexpando.js' type='text/javascript'>

/* http://www.MasDoyok.co.cc (c) Script 2009*/

</script>


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



Lepas selesai.. korang Save



Dah selesai tu..law korang nak wat gambar membesar untuk entri.. korang gune care nie k

Mula mula korang upload gamabr korang..guna LARGE k..contoh cam gambar kat bawah nie..



Dah selesai upload..korang klik kat edit HTML kat atas box posts korang tu..contoh gambar kat bawah nie




Ok dah kan..

Lepas tu korang akan jumpa kod gambar korang camnie


<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_LhHZAifMoFE/THiGNVhv3oI/AAAAAAAAB8I/fuhye9-Xohs/s1600/blogger+middle.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 293px;" src="http://3.bp.blogspot.com/_LhHZAifMoFE/THiGNVhv3oI/AAAAAAAAB8I/fuhye9-Xohs/s400/blogger+middle.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5510301707762916994" /></a>


So korang kene ubah skit je dalam kod gambar korang tu..korang tambah kod nie class="expando" diantara img style So akan menjadi cam nie


img class="expando" style


lepas tu korang ubah plak width: 400px; height: 293px; kepada width: 320px; height: 234px;

dan selesai...so semua tu akan jadi contoh kat bawah nie


<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_LhHZAifMoFE/THiGNVhv3oI/AAAAAAAAB8I/fuhye9-Xohs/s1600/blogger+middle.jpg"><img class="expando" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand; width: 320px; height: 234px;" src="http://3.bp.blogspot.com/_LhHZAifMoFE/THiGNVhv3oI/AAAAAAAAB8I/fuhye9-Xohs/s400/blogger+middle.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5510301707762916994" /></a>




Selesai...

Tu...je


Law korang nak Wat gambar kat side korang membesar lak korang gune kod nie k.



<img class="expando" border="0" src="URL GAmbar korang" width="150" height="150">


width="150" height="150" korang bleh kecilkan lagi or besarkan lagi...tapi jangan lah sama besar ngan size gambar sebenar k..




k



Selamat mencuba.




papai..






.



42 comments:

ShazlinaSaad said...

wah..nk try2..lam cari tutorial nih...

Wan_hazel said...

ShazlinaSaad

ok kak..slmt mencube..hehehe

Onelove...Jambu merah warna said...

thnks wan..blh cuba =)

Wan_hazel said...

Onelove...Jambu merah warna

ok ok..hehehe

Amyna said...

wahhh.. nice tutorial.
thanks ya wan.. yeszaaa!!!

Wan_hazel said...

Amyna

hehehe...welkam....selamt mencuba

モハマヅ ブッカリ said...

code nie kite da lama gune (^^;) just tak wt tutorial je..
sbb tak pandai nk mengajar (^^:)
ader byk lagi yg kite leh wat

zoom in/zoom out/shake/slide/swap...dll ader mcm2 lagi tak ingat

kire wan nie rajin juga eh wt tutorial ...bagus2..maju kn warga2 blogger

Wan_hazel said...

モハマヅ ブッカリ


owh ye ke..nanti wan wat tutoeial tu lak..ehhehe...

miszATIN said...

tak menjadi pungg..=(

Wan_hazel said...

miszATIN

bace betul2 k....nanti bleh lah tu....gune gambar yg besar..

AinDeLuvlyangel said...

menjadi...
tenkiu2...^_^

Wan_hazel said...

AinDeLuvlyangel

taniah2..hehehe

nairaariaa said...

waa...bes nye kal dapat buat gambar camtu...tp mls la..hee~wan tulun buatkan la...hahaha~slmt hari raya...

Wan_hazel said...

nairaariaa

hehee...samat ari raya gak naira...

Tomato Gurl's Life said...

new tutorial..ni best singgah kat sini..leh cuba nati..hehe

Wan_hazel said...

Tomato Gurl's Life

ok cik tom..ade mase try k

maisyah said...

wah..bravo!!
cuba..cuba..cuba..kalau berhasil I tell u k..very nice..

Wan_hazel said...

maisyah

ok2..selamat mencube taw

maisyah said...

Yes..Yes..berjaya!..thanx....

Wan_hazel said...

maisyah

welkam2....

nuyen said...

ala... susah nye na faham ... iskkk3

Wan_hazel said...

nuyen

kene bace perlahan lahan taw...wat ekot step

adqayyum said...

camna kalo nak wat shoutbox membesar cam abg wan???

Wan_hazel said...

adqayyum

ekot je tuto tu..n gantikan bhagian icon kod tu k...tambah expendo je..faham tak??

saraeisyabalqis said...

wuahhh!!asal xbesor2 pown?da try da..ikut arahan...dy xmmbesor pown?cmne erk?

Wan_hazel said...

saraeisyabalqis

pastikan gambar sebenar tu besar dari size yg diubah k..

saraeisyabalqis said...

da,,...besor..tp bile ubah dy nye width gn height ikut instruction dy jdik kecik skit..xde besor?..pelik2...

Wan_hazel said...

saraeisyabalqis

erk..nape jadi camtu>????

saraeisyabalqis said...

xtau..isk2..nk nges bile xjdik..xper2..kite cube lg!eceh smgt lak..kalo still xjdik..sy tnye ag:)

Wan_hazel said...

saraeisyabalqis

boleh dah tu..dh jadik..wan dh tgk kat blog saraeisyabalqis

cik siska ^_^ said...

xjadi pun...mcm mana ye...

Wan_hazel said...

cik siska ^_^

erm...dah ekot tuto tu betul2 ke??

Solihahazahar said...

Wahh. thankyouu thankyouu :)

Wan_hazel said...

Solihahazahar

welkam..hehehhe

naja said...

wan , kalau nak buat effect ni dekat pages je , bukan dekat post . macam mana eh ?

Wan_hazel said...

tu pun leh gak..tambakn je kod expando kat dalam gambar di age tu..

mumu:) said...

wan , tuto ni utk kat post je ke ? klau kat header takboleh ?

Wan_hazel said...

boleh jugak..so kene edit HTMl lah...

Cik Purple Pinkypuff said...

wan.. jadi setiap kali uplod gmbr, kte kena class="expando" tu la?>,< cp kuang pahem laa..

Wan_hazel said...

a ah..betul tu...

MaYa MustWany said...

oo mean kene wat stiap kali upload pic la ek?ok2..bookmark this page.thanks wan!

Wan_hazel said...

a ah...ok..tengs taw..ehehhe..peace