Tuesday, September 16, 2008

Tutorial Gambar Background

Ramai yang tanya, camne nak letak gambar kat background..

1st.. if sapa2 yang hebat tang design.. buleh la buat sendiri kat mana2 software yang uols suka and selesa... Like

  • Photoshop
  • Ilustrator
  • Photoscape
  • Paint
  • Indesign
  • dan lain2
Macam aku, aku lagi selesa guna photoshop, susah skit... tapi selesa la nak guna coz dari zaman jahiliah, memang aku bukak photoshop jer..

Sebelum edit, maksure uols nye tinggi and lebar mengikut saiz wallpaper...

800 x 600 atau 1024 x 768

Ok, bila dah edit segala bagai.. dan menepati citarasa masing2.. uols boleh la upload masuk ke dalam blog.. coz kita nak amik url/coding untuk dimasukkan ke dalam edit html, paham???

Kalau tak paham takpe, just upload 1st.. If nak buat secara curik2 cam aku.. aku upload gambar kat post2 yang lama.. taun 2007. Kira kalau nak try test takde la menganggu mata orang sangat kan..

Why kena upload kat blog jugak. Kenapa tak upload kat FP or frenster jer???

Sebabnye kalau FP or etc, kita tak akan dapat actual size yang kita nak. Tapi kat blog, kalau kita upload size wallpaper, kita akan dapat size wallpaper jugak.. gitu...

Then bila dah upload, click kat gambar yang kita upload tu...


Then kat mouse, click kanan amik properties...


Kat sini, copy url location untuk gambar wallpaper..

Bila dah setel tang nie, pergi ke edit html...

Carik coding nie..

body {
background:$bgcolor;background-image:url("http://2.bp.blogspot.com/
_NGLN8-IACTs/SM4h4lSXukI/AAAAAAAAGCI/BtXTf6ZfzBk/s1600/burok.jpg
");
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;

Then paste kan url yang uols copy tadi kat tulisan merah yang aku tanda tu..

Pastu save

Done..

=D

Selamat mencuba..

note: If uols malas nak edit gambar sendiri or buat wallpaper sendiri. Dan nak guna wallpaper yang sedia ada kat intenet, buat benda yang sama jugak ye...

28 LoveGreen:

peej said...

bagus betul kau ni tau..
semua kau bg tutorial..semoga dapat pahala banyak2 di bulan puasa ini..ni kire amal jugak la kan..haha..

umieadam said...

terima kasih ceera..
awak ni tak kedekut ilmu
bagus

hiks..

saya ni silent reader awak..
very the loyal one..
sama ngan emah punya
tp jarang nak tggalkan jejak

atty's said...

thanks ceera..gud infooo

MAMA IQA said...

tq la ye ceera..berguna bg saye yg buta blog lg ni..:)

darling8tabby said...

nanti akak cube..tenciu dek

BabyGD said...

i tetap tak gheti ler babe... buatkan please...

pearlEJ said...

wahhhhhh... bagus tau ira nih.. cukup lengkap kasi tutorial... hehehe..

Beautiful Disaster said...

nk buat..tp cm maleh nk buat..cmno tu..?tp gud la ko..leh jd cek-gu!

Mya said...

bagusnya... nnt nk try test lah.. thanks ceera.. :D

intan zura said...

pandainye lah ceera
tak reti org nak wat mende2 nih

eYaNacOMeY said...

waahh..ade tutorial.. thanx for the info..mcm paham ur explanation..

tapi..

cam xde mase jerr nk aplikasikan..huhu..
alangkah syoknyeee..if tuan guru nie tlg watkan..hikhik

:: p R i n c E s S _ N :: said...

bgs r ko skg...haruss dpt income lebey pasni....ley blnje aku...

ZBELLEZA said...

bagus la ader tutorial camnie..leh try lepas nie kan :D

JIVEBUMZ said...

thanxs ceera.. salam kenalan.. i dah link ur blog k

nn said...

salam..
ceera...nn nak tahu camne nak dptkan background yang kosong jer.cam blog ceera nih.

az1ra said...

ceera..
Saya dah try tapi gambar tak keluar la.saya paste html saya..tolong tengok apa yang tak kena yer...tima kasih...
*/

body {
background: $bgColor;background-image:url
("http://1.bp.blogspot.com/
_t0aT3tUGGuM/
SO69tqY6aJI/AAAAAAAAATg/rpOqv3XLR30/s1600-h/PhotoFunia_4585a%5B1%5D.jpg");
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;

Ceera said...

http://1.bp.blogspot.com/_t0aT3tUGGuM/SO69tqY6aJI/AAAAAAAAATg/rpOqv3XLR30/s1600/PhotoFunia_4585a%5B1%5D.jp

guna coding tu eh...

az1ra said...

haah.
tadi try punya try..akhirnya keluar gambar tapi tak jadi macam vp la.rupanya kena kecikkan layout.
baru nampak gambar kat belakang.
cammana pun saya akan teruskan usaha..caiyo az1ra!hheheh bagi smangat utk diri sendiri.

c4r|~z@fr4|\| said...

ceera, naper background aku xmo ikut bila nk scroll ke bwh...? salah silap harap betulkn. tq...

CuFa said...

npe bckground pic tu x ikut bile scroll down yer??huhu..maceh2..

nasaoji said...

cikgu.,, diri ku ini msih terkial2 mau buat border n background bergambo nih..asyik pail jer...sobsobsob...huargghhh...

maisy said...

kenape ye,website sy tak ada coding cam tuh..so nak add kat mano..dah puas dah carik tp tak jumpe..tulun

Belly-Button said...

yayay suda berhasil d blog ku! thanx!! xoxo!!

Shahril @ Hang-Nawa said...

Salam saudari ceera,
Saya hang nawa...blogger baru.Saya dah cuba buat seperti yang saudari ajarkan tapi still tak dapat letak pic kat background.

mintak pertolongan dari saudari
http://hangnawa.blogspot.com

Dheylla said...

sy dah cube bnyk kali la ceera,np x boleh ea?

tlg la sy.
plzzzzz.

Diana Jamil said...

Sy xjmpa la yg mcm cikgu ckp tu...sy jumpe yg ni je cikgu...

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

da try adjust utk tepek...tp jd le...camne erk?

Diana Jamil said...

Sy xjmpa la yg mcm cikgu ckp tu...sy jumpe yg ni je cikgu...

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

da try adjust utk tepek...tp jd le...camne erk?

little yaya said...

slm.. em sy pon x jumpe coding y ceera ckp tuh..sy pon juz jumpe y nih jek..
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

memula buat kluar gambar nye tapi kecik n dy kluar kat top left..
try godeh2 gambar nye jadik tile.. dy x centre.. bile godeh lagi trus x klua walaupon sy ikot step y mula2 tuh..
hm cam ne ek?