Wadah Madrasah Pengalaman: Tutorial buang latar belakang header pada Template_HTML / Remove background Header_HTML


Saturday, May 7, 2011

Tutorial buang latar belakang header pada Template_HTML / Remove background Header_HTML

.


Salam korang...
(Maaf entri tutorial kali nie banyak mencarut tapi berguna..hehehe)


Kali nie Wan nak wat Tutorial buang latar belakang header pada Template_HTML / Remove background Header_HTML..Mesti korang dah penat je kan .Lepas edit cantek cantek header dah save dalam format PNG..dah wat transparenst tu..Dan lepas tu bila upload je kat Blog..Dapat hasil memengongkan.. latar belakang header korang lak kacau..Yang nie masalah kat HTML template korang..So kali nie..Korang tak yah risau k..Wan ada cara nya..Ada dua cara taw..Korang tengok lah mana satu yang korang leh guna nanti..Try n error k..




Bagi yang nak wat header transparents tu korang leh tengok tutorial nie..Klik je link kat bawah nie k..

Tutorial nak wat header transparents

Dan kalau korang nak rapatkan header dengan Main body ..Korang tengok lak tutorial nie..

Tutorial rapatkan Header pada content/body blog korang


Dan kalau header korang tu tetiba lak tak center..Korang try tutorial kat bawah nie lak untuk centerkan header korang.

Tutorial centerkan header...






Skang nie masalah latar belakang kat belakang header korang lak..Wat kan blog korang tak comel,tak kawaii,tak cute kan kan..So jangan risau..Wan ada penyelesaian nya..Eceh dah macam wat iklan lak..hehehe..


Faham tak maksud latar belakang belakang header korang tu..Ok Wan kasi contoh k..Macam kat bawah nie..Mula mula Header korang dah transparents kan..


Lepas tu bila korang upload je..Korang akan dapat hasil macam kat bawah nie..Ada latar belakang lak kat belakang header korang tu..Macam kat bawah nie.


D
an korang nak dapat hasil macam kat bawah nie kan..




So nie lah yang korang cari..Betul betul..Nie lah tutorial nye..apa tunggu lagi..hehe

Jom Tutorial.

Tutorial pertama

Dashboard>design/layout>Edit HTML
Tick expand widget

Mula mula korang cari kod nie

/* Outer-Wrapper

CTRL+F bagi memudahkan pencarian.

Dan nanti korang akan jumpa kod macam kat bawah nie.


/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 825px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font-family: Verdana;
Background: #ffffff;
}

So korang buang lah kod nie..delete je taw..Background: #ffffff;.


Dah selesai tu..Korang turun sikit kat bawah kod tu..Dan korang akan jumpa lak kod macam kat bawah nie.


#main-wrapper {
width: 525px;
float: left;
padding-left: 10px;
padding-right: 5px;
}

#sidebar-wrapper {
width: 230px;
float: right;
padding-left: 5px;
padding-right: 10px;
}


Law korang dah jumpa kod macam kat atas tu..korang kene wat penambahan kod sikit k..Korang tambah kod nie lak...Background: #ffffff;.Betul betul bawah #main-wrapper { dan #sidebar-wrapper { korang tu.Contoh macam kat bawah nie..


#main-wrapper {
Background: #ffffff;
width: 525px;
float: left;
padding-left: 10px;
padding-right: 5px;
}

#sidebar-wrapper {
Background: #ffffff;
width: 230px;
float: right;
padding-left: 5px;
padding-right: 10px;
}


Ok selesai..Korang preview..Law tak de error korang save k.

Law tutorial nie korang tak leh guna..Korang guna Tutorial kedua nie lak..


Tutorial kedua

Dashboard>design/layout>Edit HTML
Tick expand widget

Mula mula korang cari kod nie

#header-wrapper {

Nanti korang akan jumpa kod macam kat bawah nie..

#header-wrapper {
width: 825px;
margin:0 auto 10px;
border:0px solid $bordercolor;


Dekat kod nie korang kene wat penambahan kod gak..Korang kene tambah kod nie height: 225px; dekat bawah width korang tu.Yang nie korang kene edit PX dia k..Korang ubah ubah nombor tu sampailah header korang tu bercantum dengan body. height: 225px; Ubah nombor yang lip lap lip lap tu.Contoh macam kat bawah nie.


#header-wrapper {
width: 825px;
height: 225px;
margin:0 auto 10px;
border:0px solid $bordercolor;


Law dah..Preview ..law tak de error korang save..


So selamat mencuba.


Papai.

.



44 comments:

SYIMA said...

utk minima template xbleh kan??

budak manja said...

knp tk jumpa yg /* Outer-Wrapper
dgn #header-wrapper { tu?

Ruqaiyah Amanina said...

sy gne classic template cmne lak?

Teha C said...

wan, dua dua tak boleh guna :( tak jumpa pun code yg wan suruh search tu.

sayeAIZAnarzeri said...

xjumpe pon kod2 2:(

Hanis said...

Erm. Dah try cari dua2 code but still tak de :(

Zaf98 said...

x jadi la abg.. dua² sy xde mende tu.. :[

Wan_hazel said...

semua...wan reply satu je. k...kekadang template ade yg tak de..n meti wat kod tu sendri...jgn lupa expand widget taw...

puteri aminuddin said...

wan , putri carik code /* Outer-Wrapper
dgn #header-wrapper { tkde pon . then cmne erk nak wat?

nano said...

wan,,,,,,,,,,thnks yer,,,hehe nk ckp tu je

*er,,xkena dgn tajuk entry wan,,kihkih

Wan_hazel said...

puteri


tak leh gak ke??pelik nye

Wan_hazel said...

nano..ehhehe..wlekam..

qahfisya farsya said...

nape tadek due2 code tue ?

puteri aminuddin said...

a ah lahh . cmne nie ? wan ade kap mesti wat kod uh sendiri ryte ? cmne nak wat sendiri ? tk paham

Wan_hazel said...

tambah je kod tu dalam template..try n error taw...mana taw leh..

Hajar Hadija said...

SIK PAT :( mcm ne mok tmbh code ya?

Wan_hazel said...

ktk perlu edit lain ik cara ya li...ktk pakey template pa??

♥mRs fuAin♥ said...

da try..
ciap da create code 2..
tp xjd jgkk..=(

Wan_hazel said...

fuain

tak leh gak???len template tu kot..

♥mRs fuAin♥ said...

alaa...=((

Wan_hazel said...

♥mRs fuAin♥

kene edit byk lagi taw..law nak wat tu..template tak sama so kene tambah n replace kod..

♥mRs fuAin♥ said...

sshnye..
tlg wtkan laa..
blehh??
keh3..=P

Wan_hazel said...

fuain...bukan tak nak wat..tp wan skang tgh final..law ubah tu better wat template baru..hehehe

♥mRs fuAin♥ said...

heheh..
tmplate bru ea??
adehh...=P

Haifaa Eus said...

tak jumpa pon , geram nehh .. huaaaaaaaa T____T

Wan_hazel said...

bergantung dgn template gak taw...yg wan nye tuto tu...minima template

Nurul Ayna Nabiela said...

x dpt crik gak
/* Outer-Wrapper yg nie.. nper ekk??
klu outer adelah..
:'(

Wan_hazel said...

law camtu tambah sndri kot outer wrapper tu..try taw..preview..law tak leh so tu mesti bukan minima template

naja said...

wan, semua code kat dalam tutorial ni takde dekat blog naja. macam mana ni :(

Wan_hazel said...

try naja tambah..or template naja jenis lain kot

imma Girl said...

naja pakai simple template

Wan_hazel said...

owh..naja try tambah kod tu kat tmplte

nurul rabihah ismail :) said...

hye wan , biee nak tanya niyy
kalau yang tuto niy kan ?
bie tak jumpa code code niy semua
boleh tak wan ajar cara lain ?
bie pakai ethereal template . wan ajar lan
PLEASEEEEEE
dh byk dh bie cari tuto ni tapi satu pun try tak boleh
if nak tukar template pulak , syg sbb byk sgt dh edit , nnt kena buat balik lagi seksa
wan tolong boleh ?
if tknk buat tuto pun , kasi bie link tuto yg bolh pakai
please sgt :/

Wan_hazel said...

yg tu wan tak taw lah...cowie taw..kene godek2 HTMl tu skit..

alep' Darlings said...

salam. wann. aku dah try buat tambah kod /* Outer kat edit HTML sbb bkn semua blog ade kod tu kn? tp xilang la bckgrund tu even xde error. pelik aku. 2nd, aku try tmbah #header-wrapper tu invalid lak. reply shoutbox aku eh. www.aliffsingle.blogspot.com/ thanks

Wan_hazel said...

alep' Darlings


camne eh...kene ubah kod main wrapper tu kot..

FatinCokelat ♥ said...

kalau takde /* Outer-Wrapper? o main wrapper?

Wan_hazel said...

dah klik expand widget??

Yaya JB said...

Salam wan . Yaya da cari kod tuh . Tade lah . Yaya godeh-2 jugak kod2 tuh . Tapi takot kang tersalah godeh . Haa abes lah . Cam ner ea nak taw ade kene mengene ngn kod outer wrapper ny ? Or Wan bole buad kan ke ? Hihi :D (Y)

Wan_hazel said...

Yaya JB

guna template lain tu kot

CIK Bun Bun said...

salam,saudara wan mcm mne kt nak buat menutab yg tersedia ad pd template?

Wan_hazel said...

salam..

klik kat add gadget>page

alyn adnan said...

macam mane nk buad minima template plak..? heyy fenin2

Wan_hazel said...

minima temlate ada disediakn kat blogspot tu