17 January 2009

Change Blog Background

:ascii:salam & good day semua..
hehehhe..baik je intro aku kan..
ok2x straight to the point..
boleh tak aku kasi tutorial dalam blog aku ni??
yea2x aku tau ramai dah buat2x tutorial bagai..
tp aku cuba buat tutorial ni dgn cara aku sendiri..
boleh???hiksss

sblm tu nak tanya..
anda semua yg dok rajin edit2x blog ni paham ke apa yg anda editkan..
tau apa itu html?? css?? xml?? xhtml??
tau bagaimana bezakannya??
jika tau alhamdulillah.....:ascii:
xmo la kalau anda semu dok beria edit2x semua kan..
tp xpaham konsep dan cara coding tu berfungsi..
mmg lah sesetengah org akan ckp...
"buat apa nak paham..aku bukan programmer..asal copy paste sudah..."
haaaaaa...copy paste je..
jgn lah begitu..at least paham kan sikit jadila...
so kali ni aku nak citer pasal CSS..
berkaitan pula dgn tuts yg aku nak bagi iaitu menukar background blog anda..
kepada yg dah pro..tahniah..
ni aku nak ajar pada yg baru2x dlm dunia blog...
so kepada newbie tahniah anda sudah maju setapak kehadapan..
cuma yg anda perlu pastikan..jgn biarkan blog anda bersawang...:ascii:

lets the tutorial begins..

1.click pada layout tabs
2.then akan jumpa Edit HTML..click di situ
3. find word body { (ctrl+f = shortcut utk dapatkan kotak find)

jika anda mengunakan Firefox..kotak find akan wujud di bawah ye
jika anda mengunakan IE..kotak find akan membuka tetingkap baru

4. copy n paste url gambar anda..
anda di galakkan upload gambar background di Photobucket
boleh je kalau nak guna foto album online yg lain.. aku suggest apa yg aku guna..

**utk background-repeat(mengulang gambar background)
background-repeat: repeat-x

jenis2x yg lain:
  • repeat : ini default background akan repeated vertically
    atau horizontally
  • repeat-x: background image akan repeated horizontally
  • repeat-y: background image akan repeated vertically
  • no-repeat: background image akan akan displayed hanya sekali


**utk position pula (letaknya posisi gambar)
background-position:top left

jenis2x yg lain:
  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right

**another contoh(cth ni aku gabungkan semua..:ascii:)
body
{
background-image: url(IMAGE URL);
background-repeat: no-repeat;
background-attachment:fixed;
background-position: top left
}


5. kemudian anda boleh save template tersebut
6. taraaaaaaaaa dah boleh view dah..hehehhe:ascii:


Photobucket
Photobucket

Photobucket

buat pengetahuan anda semua..coding yg anda ubah tu namanya CSS
CSS stands for Cascading Style Sheet
melalui maksud CSS kita dah boleh paham sikit la apa function CSS ni..
ianya lebih kepada nak ubah styles html kita..
ala2x nak cantekkan page kita..

CSS ada 3 type..
  1. Inline style
  2. Embedded/Internal Style
  3. External Style

yg anda ubah tadi ialah embedded/internal style
paham?? xmo pening2x kan kepala korang sgt..
aku bagi simple penerangan je pasal CSS ni..
kang bagi lebih2x kang poning pala plak kang..
tp if nak tau lebih lanjut boleh je tanya2x..
insyaALLAH aku jawab dgn sebaik mungkin..hehehehe


*skema wei ayat2x aku dlm ni..dah macam ayat dlm buku IT dalam Bahasa Melayu..
xpelah janji korang phm...haihhh..kejap anda kejap korang..layan je la ye...:ascii:
actually aku tgh praktis utk future ni..FUTURE??? apakah??
apa kena mengena future ngan tutorial kan?? hahah pelik?? tunggu je la..
kalau comfirm aku kaborkan..xcomfirm lagi baik diam2x..hehhehe:ascii:
mood::bunny1:

Munirah Abd's Facebook profile

8 comments:

  1. kdg2 xbest gk gne photobucket..
    sbb sampai 1 tahap kuar gmbar "upgrade to pro" sbb dh mencapai thp bandwidth maximum..
    gne imageshack ok gk tp kne tulis la url ke gmbar tu...

    ReplyDelete
  2. yeyehhhhhhhhhhhhhhhhhh, nak try, tapi background pe erk nak letak

    ReplyDelete
  3. i dah pnah tukar dlu.. tp ada org tu tukar balik coz dia xsuka my bground kaler.. :p

    ReplyDelete
  4. dik muniiera...
    thanks berkongsi info blog nih dengan kami semua
    pandai dia edit
    patut la blog dia comey jer
    hehhehe

    (^_^)

    ♥Yanie Putrajaya♥

    *********************************

    ReplyDelete
  5. waa..tq2x for sharing.nti akk bole sengetkan pulak image background akk.hihi:)

    ReplyDelete
  6. yea... chekgu mun cayunk' sgt bijak.. hehe.. patutla nmpk ade perubahan sket kat umah nih... hehe

    ReplyDelete

Dear readers,comments make me happy and make me smile!! Yes!! your comments will be moderated.Dont worry about that ok.. Its a procedure to kick out spammer and mosquitos.Thank you.

# NO SPAM OK!!!
# Comment is awaiting on moderation.
# No harsh word!!


Thanks for your comment!! *wink*