Header

Friday, October 10, 2008

Tutorial - Bagaimana hendak menukar background blogspot?

Fuh... ramai betul lak yg ym/email/komen mintak ajar camna nak tuko background...
laa.. korang nih.. manja betul lah.. carik la sendirik!!! bukan susah pun...

tp takpe la.. biar aku cuba ringkaskan cara2 nak tukar image background blogspot dgn bahasa aku...

ok murid-murid sekalian...
sebelom apape, aku suggest korang bekap dulu template yg korang pakai skrg.. mana tau tgn korang tak bedung kecik2 dulu.. lain aku arahkan, lain korang pi tekan... kahkahakh

camna nak bekap? alahaii.. camni haa..
silalah login ke akaun blogspot anda.... dan klik pada Layout, lepas tu pilih Edit HTML...
kat situ ada ayat Download Full Template ... klik situ utk korang download and bekap template current korang supaya klo terjadik apape kat template yg akan korang ubah jap lagi, korang bole revert balik ke template asal...

klik gamba utk besarkan.. takkan tatau lagi?

ok.. dah berjaya bekap?
klu tak berjaya, korang simpan je la niat nak edit background korang... sure hancur korang punye blog nnti klu nak wat bekap pon tak lepas... kahkahakhakh.. tp serius.... klu tak reti bekap, takyah la teruskan dgn step yg aku nak bg ni kang...

ok.. pada mereka yg celik sikit mata IT dia tu, syabas kerana telah berjaya wat bekap template... igt.. ni hanya bekap template.. bukan bekap isik kandungan blog.. template merujuk pada struktur n design interface blog korang tau.. bukan isik....

ok skrg ni step nak tukar gamba background korang...
korang dah ada ke gamba2 yg korang nak bubuh sbg background?
besar mana gambo korang tu? jgn besar2 sgt.. nti berat nak load...
size yg dicadangkan, 800x600.. size standard utk skrin pc.. so klu dia pkai pc dimension 1024x768 pon ok la lagi.. dan zaman skrg pon mana ada org pakai 640x480.. eh korang paham ke nombor2 aku sebut ni? ala.. sng korang edit gamba2 korang tu, dan wat size dia 800x600 je..

tp tu utk mereka yg nak letak background mereka sbg gambar yg seketul je.. kalau nak wat gambar backgroud korang tu berulang2 (tile) pon leh gak nnti.... so klu ko nak tile kan, terpulang la kat korang nak wat size camna pon...

jap.. aku nak pi minum air sat... hausss...



cak!!!! aku dah ada balik!!!
sambung pulak...
gamba korang tadi, korang pi upload masuk dalam akaun album gamba korang.. photobucket ke.. picasa web ke... what ever lah... dan lepas ko upload tu, korang amik dia punya url reference yg merefer pda gamba tu... copy url tu...

lps tu, ni step yg korang perlu berhati2..
pada ruangan edit html tadi tu, korang akan nampak satu bahagian yg dipenuhi oleh kod-kod html.... dalam kod tu, korang carik satu perenggan yang ada tulis ni:

body {
background:$bgcolor;

bahagian 1 - menukar warna background

ok pada sesapa yg just nak tukar kaler bg dia je, so sng... korang just tambah je kod kaler tu mcm ni..

body {
background-color:#B38481;

igt!!! korang kene copy n paste sebijik2 setiap aksara kod yg aku blod kan itu.. jgn tertinggal walau pon koma.. klu tak nnti compile error...!!

yg aku hilight merah tu, korang leh taruk la kod kaler.. mana nak dapat kod kaler? korang pakai la software mcm photoshop ke... nnti ko leh tgk kod kaler dalam tu.. pakai rgb kaler pastu amik la kod dia...

bahagian 2 - menukar/menambah gambar background

so skrg korang nak tambah gambar kat backgroud ek.. camni lak caranya...

body {
background-image: url(URL yg korang copy td);

yang tanda merah tu, korang paste la url gamba korang yg korang dah upload td....
cth url klu korang pakai photobucket : http://i154.photobucket.com/albums/s200/prebet/suap_suap.jpg

bahagian 3 - atribute yg korang bole ubah bagi gambar background

kan tadi aku ada bgtau korang leh tile, center, repeat gamba2 background korang tu kan.. so camni la caranya.. korang tepek je kod ni kat bawah line background-image tu td...

3.1 camna nak wat gamba korang secara tile.. berulang2..

yg ni utk taknak repeat... maknanya korang nak gamba tu just appear sebijik je kat skrin
background-repeat: no-repeat;

ataupun, korang leh set klu nak gamba korang di repeat beberapa kali secara mendatar...
background-repeat: repeat-x;

klu nak diulang2 secara menegak, pakai kod ni
background-repeat: repeat-y;

3.2 Memposisikan gamba background

korang jugak bole memilih posisi gamba background korang.. tp ni hanya utk yg tak repeat la.. klu repeat tak guna la korang nak guna position ni...

background-position: top left;

selain top left, korang leh pakai:
top center;
top right;
center left;
center center;
center right;
bottom left;
bottom center;
bottom right;

3.3 utk menjadikan imej anda statik

makna kat sini, secara default, background imej korang ni akan ikut bila korang skroll... tp klu korang taknak dia ikut, maknanya korang nak dia ada kat bahagian atas je, korang pakai la kod ni:
background-attachment: fixed;


so secara lebh kurang, bila korang dah combine kod ni, nampak la lebih kurang camni:

body {
background-color:#B38481;
background-image: url(http://i154.photobucket.com/albums/s255/ownlblog/narutosasuke1024x768.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;


paham tak ni....?

tak paham? mmg korang tak dilahirkan utk dunia IT.. kahkahkah.. soh je la kengkawan korang yg tau IT tolong korang....

kami di masvionanas.blogspot TIDAk akan bertanggungjawap jika sebarang kerosakan berlaku ke atas template korang.. kan aku dah bgtau awal td, wat bekap.. klu tak reti wat bekap, takyah la korang berangan nak tukar gackground sbb kene main ngn koding.. huhuuhuh

3 Comments Uols:

CatlinaFly said...

k..thanks.nanti kitowang try :P

Atiey MN said...

erk...fenin..hehe

Masviona said...

catlinafly:
hope leh phm lah ye..:)

a^t04:
alamak fenin ke attiey...xper² baca byk kali kasi phm ek...hehe

pd yg lain jugak...yg ada tnya ritu sila lah refer sini ye...

Disclaimer

Blog ini adalah sebagai Laman Peribadi.

Dengan melayari blog ini, adalah dengan ini anda bersetuju bahawa pemilik dan penulis blog ini tidak akan bertanggungjawab terhadap sebarang kesulitan dan sebarang isu yang ditimbulkan. Segala isu adalah sebagai pandangan peribadi pemilik dan penulis dan tidak harus dianggap sebagai kenyataan rasmi.

Pihak pemilik dan penulis blog ini juga merakamkan setinggi-tinggi ucapan penghargaan kerana sudi melayari laman blog ini.

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

You can read my blog as often as you can but please don't simply try to judge me just because you read my blog everyday.....huhuhu. I admit i'm not a perfect person but i've my own personality.

I know i write about my life, my family, my hobby and etc in my blog but still you don't have any reason to judge me because i believe what you read here is just ONLY A LITTLE PIECE part of my life. Please bear in mind just ask yourself who you are to judge the life i live??? Last but not least WELCOME to my blog and may ALLAH bless all of you my blog readers and please do come again. :)

Peace No War dear!!!!