Wadah Madrasah Pengalaman: macam mane nak tukar Frame/BG Shoutbox pop up/Ajax Tutorial


Tuesday, July 6, 2010

macam mane nak tukar Frame/BG Shoutbox pop up/Ajax Tutorial

.



Salam korang





So korang dah tengok kan camne Shoutbox Wan tu... Pop up/Ajax tapi tak sama ngan member blog len kan.. so nie Wan tunjukkan cara nya.. jom layan


1St open Adobe korang,,Sesape yang belum ada Adobe tu..Download k ADOBE PHOTOSHOP DOWNLOAD






Lepas tu klik file and new..untuk wat New BG. And size ekot suka korang..Law Wan letak 420X460 pastikan Transparent k..tengok kat anak panah tu...


Lepas tu korang editlah Gambar yang korang nak...letak kat dalam tu..pastikan ruang tengah korang jangan letak pape..law letak pun kompem tak nampak...koz nanti Cbox korang duk kat tengah tu..




Ok...kite nak wat frame plak..dah letak gambar (gambar tu korang editlah k)..and wat frame kat tepi plak...mule mule wat new layer..tengok contoh kat atas k..klik cam kat anak panah tu..



Lepas dah da new layer korang perlu warnakan semua layer tu...senang je..korang klik kat tong cat tu..contoh kat atas.law tak de korang klik kanan lepas tu adelah kuar..and then klik je kat BG korang tu..





So jadilah cam yang kat atas tu..




lepas tu korang klik plak kat tempat yang cam ada petak segi empat..contoh kat atas k.



Lepas tu korang wat lah petak kat BG tu..contoh kat atas tu..lepas dah wat...korang tekan CTRL+X utuk buang box yang korang petakkan tu..


and then jadilah camnie...



Korang edit lah balik pape yang korang nak kat situ k..




Dah siap edit, korang save lah...file/save as...pastikan dalam bentuk GIF k..law tak nak pun tak pe..


lepas selesai semua..korang upload plak kat mane mane tempat nak ambik kod BG tu..law Wan, Wan upload kat Photobucket..




Lepas selesai upload korang ambek kod BG cbox tu..ambek kod yang cam kat anah panah tu k..





Korang pastekan kat " background:url " (kod Ajax) k..contoh kat atas tu..gantikan kod yang lame ngan yang baru..dan pastikan width: ___height:___ korang ubah ekot size BG cbox korang tu..


so dah selesai..




Yang Wan wat tadi akan jadi camnie...tengok kat bawah










Tamat





.



56 comments:

cha cha said...

salam..huhu...nk wat gak shout cm 2..ad pic sniri..tp mek x fhm..huhu..agik pon lappy mek xda adobeshop...jeles ewh tgk shoutbox ktk.. :(

fairuz said...

macmmane nak type kat shoutbox wan ni? xbulih nak type =='

Wan_hazel said...

try try jgn tak try

Nur Hayaty said...

fuh....akhirnya siap gak...maceh ye cik wan hazel...hhee

Wan_hazel said...

cha cha

mek dah bik nak kod ya

Wan_hazel said...

fairuz..

klik je kay my shoutbox..nanti adelah pop up cbox wan..heheh

Wan_hazel said...

kak yatie..

taniah taniah...tak sia sia mencuba..hehehe

Nur Hayaty said...

itupun berkat kesabaran wan mengajar...che wah..(smbil buat muka terharu...hehe =P)

Umie Nadhirah said...

uw la la.. Thanks! akan mencuba soon !

Wan_hazel said...

kak yatie..hehehhe...

Wan_hazel said...

umie

ok...nanti cube taw..hehehe

Cik Putput said...

wohoho~ gempak..tp xreti wat..sy stay dgn shoutbox yg simple je la..ngeee~

Wan_hazel said...

yep//stay je ngn shoubox yg lame...wan pun stay..hehehe

suzie rahman said...

kui2..remeh nya..uwaa..

petite_girlz07 said...

bes r......mekcih sbb kgsi idea...
:)

Ғмɛσω said...

kalau wan tolong buatkan boleh?
tak ada photoshop la.
kalau tak boleh tak pe.
saje tanya.

Wan_hazel said...

ok bleh je...nak wat yang camne???kasi detail kat mail wan k...wan_scremohazel@yahoo.com...n kasi kod shout kat wan k..

Ғмɛσω said...

ikut tema blog star warna purple la.
tapi warna purple x de star pon ok.
ikut kreativiti wan la. x de idea. hee~
wan prnah buat org lain pnye x?
nak tgok boleh?
*sory kalau byk songeh. =P

Wan_hazel said...

tak pernah wat ..huhuhuu..yg ade pun yg kat dalam entri tu je..huhuhuuhu..nak yg camne sebenarnye...??huhuhu

.:|kamaryeah|:. said...

cantiknya~
suke nyer~

Ғмɛσω said...

thanx.
dah jadi.
tp nak buat icon die mcm mana eah?
yg mcm wan pnye.
die tulis 'mama nak buka puasa'.

~be'ah ~ said...

x fm step ni...'Lepas tu korang editlah Gambar yang korang nak...letak kat dalam tu..pastikan ruang tengah korang jangan letak pape..law letak pun kompem tak nampak...koz nanti Cbox korang duk kat tengah tu..'

...NAK LTK GMBR TU X RETI..NK KENE CLICK APEW

Wan_hazel said...

~be'ah ~

law nak letak gambar tu kene klik kat file and open lepas tu cari gambar yg korang nak..

law nak taw lebeh pasal nak letak gambar or potong gambar tu...cari kat bhgian side wan tu "Tutorial nak wat header transparents"..

ecah said...

wow..ini cool..

Wan_hazel said...

ecah

hehehe..tengs

Shaza Najwa said...

knp tkn layer 2 x ada layer bwu pun?

Wan_hazel said...

Shaza Najwa

erk..nape lak takde...pelik2

tNie si keCiK said...

tak retiii...uwaaaa..kene ada ajax code ke?? kalo gune yg bese xleh ke? dr mn kaa code ituueew??

Wan_hazel said...

tNie si keCiK


cari kat bhgian tuto wan..tutorial ajax shoutbox k...law tak de ajax shout...wat pe nak susah2 wat bende nie.,.tol tak??

Shaza Najwa said...

yg tong cat 2 knape x de r?Ni leh gne adobe photoshop yg mne2 jew ae?

Wan_hazel said...

Shaza Najwa

a ah..semua adobe leh guna..law tak de..klik kanan kat tempat tool tu k;

tNie si keCiK said...

ehehekkss..tue la..tp tringin nak yg floating2 nie..hehe..mcm cumilll jerr..sbb tue nk teraayy..tp xdpt2 smpai skang..hehehe..

Wan_hazel said...

tNie si keCiK

ade FB tak??law ade add wan k..pas tu inbox kod shoutmix kat wan..nanti wan tlg kodingkan k

Nur Shaza Najwa bt Rosshidi said...

dah ada dah.thanz

YannaLuRVe said...

wan.. dkney mun kmk mok ngkah cbox mek dlm pic dak ktk ya.. kdak penuh jak ngkah cbox dlm blog mek.. tlg mek aeh.. ^__^

Wan_hazel said...

YannaLuRVe

ktk polah ajax float shoutbox lok..munxtauk PM FB mek k..wan hazel

nur'aifaa said...

da try buat, tp still shoutbox uh tak kt center npe ye ?

Wan_hazel said...

adjust frame shout tu k

Kim Qiey Laa said...

salamm . mekaseh bab ajar mcm mne nak bwat . wahh ! cnteks daa shoutbox sy . mekasey skali lagi !

Wan_hazel said...

Kim Qiey Laa

welkam..ehehe..peace

xoxo aniesz xoxo said...

wan,cne nak download photoshop..bgtw step by step please..

Wan_hazel said...

wan dah sediakn step pun..tgk je kat bhgian tutorial tu..ade bhgian download..
or tgk nie

http://wanhazel.blogspot.com/2010/10/adobe-photoshop-cs3-protable.html

Syahirah Suhaili said...

wan..kmk ada try nak molah background ya..tp pahal nya xmok klua ow..bla d tekan,nya klua shoutbox jak..hoho

Wan_hazel said...

setting ktk betl x???or gambar ktk size nya besar glak??lambat load li

Mohd Amin Aizuddin said...

wan ade tak lagi bg shoutbox ni.law ade.amin nak.cantik

Wan_hazel said...

amin..cari je kat tuto wan k

Arina Shamsul said...

salam wan.nak minta tlg pada yang pakar ni.ngee...frame akak da siap ,tapi tak tahu nak ambik kod BG pulak..akak da masuk photobucket,tapi tak reti2 juga..isk..isk..tolong wan!!tolong!!tolong!!!

Wan_hazel said...

wan reply kat blog kak k

Syifa said...

wan .. npe kt adobe photoshop sye xde icon cat 2 .. erk ???

Wan_hazel said...

klik kanan kat tempat tu nanti ad elah tool cat tu

NZ Diaz said...

kat mana Ajax nya? aku nampak kod CSS je :O

Wan_hazel said...

kot ajax kat tutorial ajax shout..yg nie frame ..bukan kod...
\
http://wanhazel.blogspot.com/2010/08/frame-terbaru-untuk-ajax-float-shoutbox.html

liyanazahirah said...

wah saye dah pandai buat :) saye akn igt jasa baik wan sampai bile2..hee.
thanks wan..

si cuya said...

ish...best la tutor ni.... :) sat g nak cuba ..hehe

shahrul hanif said...

ni adobe photoshop cs bape




Wan_hazel said...

nie adobe cs je...