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