Wadah Madrasah Pengalaman: Tutorial Gambar Timbul bila cursor menyentuh gambar


Tuesday, March 15, 2011

Tutorial Gambar Timbul bila cursor menyentuh gambar

.


Salam korang...

Kali nie Wan nak wat Tutorial Gambar Timbul bila cursor menyentuh gambar..Wan pun tak taw nak letak tajuk apa..Wan tengok law guna benda nie Blog nampak bertambah comel..Jangan risau tak lambatkan load page pun..Nak wat pun senang...Nie untuk pengguna design/layout template je..Classic template wan tak godek lagi..ehehhe..Law korang nak tengok or preview..Leh tengok kat blog nie..WanhazelJunior.blogspot.com/..Korang arahkan je cursor korang kat mana mana gambar dalam tu..

Jum tutorial..

Pengguna Design/layout template

Dashboard>design/layout>Edit HTML
Tick expand widget

Lepas tu cari kod

/* Header

CTRL+F untuk memudahkan pencarian

Dah jumpa kod yang korang cari tu..Korang copy kod kat bawah nie..dan paste diatas kod yang korang cari tu..


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

/*------ IMAGE ANIMATION------*/
img {filter:alpha(opacity=100);
-webkit-transition-duration:.5s;} img:hover {filter: alpha(opacity=60); opacity: .6; -webkit-box-shadow: 0px 0px 20px #000000; -moz-box-shadow: 0px 0px 20px #000000; -webkit-border-top-right-radius:30; -webkit-border-top-left-radius:30; -webkit-border-bottom-right-radius:30; -webkit-border-bottom-left-radius:30;}img:hover {filter: alpha(opacity=60); opacity: .60; border: 1px solid#000000; border-radius: 50px; -moz-border-radius: 50px;}
-moz-opacity:1.0;
opacity:1.0;
}
img:hover {
filter:alpha(opacity=80);
-moz-opacity:0.80;
opacity:.80;
}
u {
text-decoration:underline;
border-bottom: 2px dotted #ff0080;
padding: 0px;
}


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

000000
Kod nie korang leh ubah dengan menukar warna yang korang nak untuk shadow tu..HTML warna kod k.


Preview dulu law tak de error save terus..ehehhe

Tu je..

Selamat mencuba..


Papai

.



65 comments:

♥ adlin roshaida ♥ said...

thanks wan ;)

Miss D'ya said...

thanks..dah menjadi..nnti jemput la dtg blog d'ya taw!! muaahh!! hehe


http://miss-dya.blogspot.com

sweet strawbery said...

da try buat da..jadi !!!
thanks 4 dis tutorial
=)

MiEra said...

bestnye tuto nie !

Professor Hanan said...

Hanan try yer.btw hanan dah try hampir separuh tuto wan fasal adobe.alhamdulillah antaranya okay dan selebihnya ko.haha

Syahirah Suhaimi said...

da lama cari benda ni , akhirnya .. jumpa juga . thanks yea !

~Sarah Bieber~ said...

eishh , da lama cari tuto ni :|
HAHA , thanksssss :P

Si Penglipurlara Yang Gedik said...

comel la!!
tq ye :)

..arcmabaharin.. said...

tak boleh pon...

Wan_hazel said...

♥ adlin roshaida ♥

welkam..eheheh

Wan_hazel said...

Miss D'ya

welkam..ehehhe..peace..nanti wan jenguk k

Wan_hazel said...

sweet strawbery

welkam..ehehehe

Wan_hazel said...

MiEra

tengs taw...peace

Wan_hazel said...

Professor Hanan

ahahha..nanti leh lah jadi pro adobe kan...senang je..

Wan_hazel said...

Syahirah Suhaimi

welkam...peace...

Wan_hazel said...

~Sarah Bieber~

ehehhe...enjoy blogging

Wan_hazel said...

Si Penglipurlara Yang Gedik

welkam...

Wan_hazel said...

..arcmabaharin..

erk..nape yang lain boleh erk...

ct mysera^^ said...

kamsahabnida..
lame dah duk cari tuto nie..
and finally b'jaya ugak..=)

Wan_hazel said...

ct mysera^^

hehehe..taniah...

dib. said...

wan,tow ta camne na sorok source picture? cntoh bila kite hala kat cursor dia ta kuar source pic kat bawah???

btw,thanx ntok tutorial ni^^

Wan_hazel said...

dib.
buang je url SRC= tu...yg img= tak yah...tu je

..arcmabaharin.. said...

wahhhhhh da jd..

unik lahh..

tq yek.

Wan_hazel said...

unik kan..ehehhe...best

♥♥ieqa pinkylicious♥♥ said...

first try = berjaya tapi gambar tenggelam pulak

second try = fikir mcm mana nk timbul kan gambar tu .

third try = berjaya timbulkan gambar.buang coding utk opacity je.

hihi :)tq again wan

Siti Nur Idayu Sabri said...

kenapa x jadi ??

Wan_hazel said...

♥♥ieqa pinkylicious♥♥

welkam...gud2 koz godek2 sendri..wan suka

Wan_hazel said...

Siti Nur Idayu Sabri

tak jadi???nape??jadi camne???

nurin_azmi said...

comel laa tutorial nie .
nak cuba lah !

Wan_hazel said...

boleh je..ehehhe

♥♥ieqa pinkylicious♥♥ said...

hahaha , x sia2 da nak grad Bus. IT ni.. sbb tu sng nk godek kowt wan.

Wan_hazel said...

hehehe..sennag je kan,,,wan tak ambek It tp leh godek2 gak..so bende senang lah kot..ahahaha

♥♥ieqa pinkylicious♥♥ said...

yela, coding die simple je .. sng nk paham even bkn programmer .

shahirah adizan said...

tengs for tutorial .

Wan_hazel said...

♥♥ieqa pinkylicious♥♥

ehehhe...betul

Wan_hazel said...

shahirah adizan

welkam..

Dea said...

dh plh... tengs!!..XD

Wan_hazel said...

welkam..ehehe

Misa Sakura! said...

best eh! hehe mek dh pake :) tq wan!!

Wan_hazel said...

hehehe..gus2,...

♥MowMoy♥ said...

wan,,,cmnie nak nuka wana nya????

Wan_hazel said...

♥MowMoy♥

tuka kod 000000 ya k...

SHAHIRAH ADIZAN said...

tengs wan :)

Wan_hazel said...

welkam..peacce

farah syahidah said...

tengs wan! :)
suke sgtt!

Wan_hazel said...

farah syahidah

welkam..ehehhe

pyqa said...

wan,kod warna tu cmne erk?

Wan_hazel said...

kod warna tu.warna...kod tu leh cari kat ggogle..cari HTML warna

Nurul Ayna Nabiela said...

erm, dulu wat dah jdik.. skrng gune template laen lak... pastu nk crik kod header tuh x dpt.. nper ek?

Nurul Ayna Nabiela said...

erm, dulu Nurul gune template laen, pastuh dh jdik.. then bile Nurul dah tukar template laen lak, kod header tuh dh x der.. nper ek? pastuh Nurul x pat nk wat tuto nie.. tlg Wan

Wan_hazel said...

try letak kat tempat len k..law yg tu tak de..outer wrapper k..

lavender said...

salam...
nak tanye ckit..knp kalau edit kat html,pastu review smule kuar page cmni..
"More than one widget was found with id: HTML20. Widget IDs should be unique."
-xpenahnye jadi,...-
:(

~~Coretan Irza.... said...

Thanks wan...berjaya jgk akak buat...selamat berpuasa..

Wan_hazel said...

sama2 kak..selamat berpuasa gak

Wan_hazel said...

lavende

mesti dah pasang widget nie kan...??

Nurul Faiz Bikers said...

DAH JADI. YEAY..

Wan_hazel said...

yeay..ehehhee..

zana said...

thanks ye wan :)

raja mira said...

nape header jadi ilang pas letak html nie ?

Wan_hazel said...

eh..napa lak header hilang..pelik nie..aiyo..

Budak Gilaa said...

Wan , saya guna classic template , tak jadi lah :'(

Wan_hazel said...

wan dulu guna classic template boleh je

Fyfie Yanie said...

cantik la . fify dah buad .. thankss wan ;)

ismi shahida said...

salam.. wan.. thank you tuto ni :) . menjadi

Umie A'nez said...

bestnyaaa!!! tQ