08 June 2011

[Tutorial] Transparentkan Header untuk SIMPLE TEMPLATE

Salam...


Tuto nie ada orang request kat Formspring.. Sorry sangat coz mira lambat buat tutorial nie.

Maksud tutorial nie adalah untuk buang header background bagi SIMPLE TEMPLATE . Template lain tak jadi ok.. Gambar cam kena potong tu mungkin gambar tak sesuai dengan saiz header blog korang.. Nak tahu saiz header yang sesuai pergi kat DESIGN > TEMPLATE DESIGNER > ADJUST WIDTH. Kalau nak buat header ambik width ENTIRE BLOG.

header sebelum buat tutorial macam nie ya..



Ok...kita teruskan dengan tutorial transparentkan header tu..
1. DASHBOARD > DESIGN > EDIT HTML

2. tekan CTRL+F atau F3 untuk cari kod /* Mobile 

3. Copy kod di bawah nie.. dan pastekan kod di atas kod /* Mobile


.header-outer, .content-inner { background-color: transparent;}
.main-outer, .tabs-outer { background-color: $(content.background.color);}
.tabs-inner .widget ul { margin: 0px -15px;}
.content-inner{padding: 0px;}


cuba PREVIEW jadi tak.. kalau tak jadi cari kod /* Header dab copy kod kat no.3 dan pastekan kat atas kod /* Header. Sebabnya ada sesetengah blog tak jadi bila paste kod dekat atas kod /* Mobile

Preview lagi..tengok macam mana..mesti korang perasan ada shadow kat tepi header tu kan...ok jaran risau ..don't worry be happy



Cara nak hilangkan shadow keliling blog..

1. DASHBOARD > DESIGN > EDIT HTML

2. tekan CTRL+F atau tekan F3 untuk cari kod .content-outer { (kod ini dibawah section /* Content)

3. Cari kod di bawah dan delete kod tersebut

-moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
  box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);



4. Preview.. kalau shadow tu dah takde dan background header tu dah takde.. klik SAVE

5. Siap...

Tutorial untuk buat header blog yang bersambung dengan content blog akan menyusul kemudian ya. Harap bersabar..

Bila dah buat tutorial nie n menjadi sila comment ya..

siapa yang guna DENIM TEMPLATE boleh guna TUTORIAL NIE

Selamat mencuba
Semoga berjaya

Sayonara...

38 comments:

ezy.fia said...

bgos ni..
sgt bergune tutorial camni..

yea! blog dh nmpk kemas gune font verdana..
=)

Amirahsza said...

@Cik Ezy Thanks cik Ezy coz sudi singgah dan comment entry blog nie..

Aini Azman said...

laa,. mcm ni ke cara nya,. aini smpai kene bagi psswrd blog kat org lain semata2 nak tlong transparent kan header,.hehehe

nurul farzana said...

yeayyy dah jadi :D
thank you !

Amirahsza said...

@nurul farzana you're welcome dear.. =)

Syuhairaaaaaah said...

@Amirah Su'aidah Yeah , dah jadik . Thanks . Walaupun saya terpaksa tukar template . tapi takapa asal jadik !

Anonymous said...

Thankyouu so much! Da lama cari tuto ne. Thankyouu kak! :)

Amirahsza said...

@Syuuyou're welcome...hehehe

Amirahsza said...

@Mariatul Qibtiyah you're welcome

Anonymous said...

Thanks a lot kak ! Daa jadi :)

Amirahsza said...

@A Little Girl bagus2 kalau dah jadi...

Nurin Irdina said...

thanks.. menjadi sangat..

Shafiqah said...

Terima Kasih!!!! Menjadi!!!!!

mirahashime said...

thanks , jadi :)

NajwaSyafiqah said...

Jadi-jadi,YAY!
HIHI , thanks :)

Razali's daughter said...

menjadi lha!
thanx!berguna sgt!!!
syg awak!

Maizatul said...

sgt mnjdi! trime ksih ;)

Anonymous said...

Yang hilangkan shadow keliling blog tu tak boleh lhaa . Camne ek ?

Anonymous said...

Kalau tak jadik macam mane ye ?

farrah said...

terima kasih banyak2 ya.syaa dah cari,padam kod itu ini..last kali jumpa blog gadis merah...Alhamdulillah dah jadi.kalau free datang blog saya 0k..

عين شاميمي said...

tq bebanyak kak :)

Eaka Najwaa said...

Tak jadi ..

Ainul Huda said...

tq so much! it really works! :DD

Anonymous said...

knp x boleh pun...dia terus blank

Nurul Ain's said...

kalau dah siap semua lepas tu nak buat border content tu melengkung macam mana?

ضوء المحبة (◕‿◕) said...

thanks, mnjadi.
tapi ade gmbar ckit2 yg tak boleh nak pdm..
nape eh..

nnajwa waa said...

nice tuto...really helpful

Adn said...

mekasihhhhhhh!

Jannah Latif said...

Thanx banyak2.. banyak kali dah guna tuto ni tolong member. :)

lyn said...

nice..!! great job..^_^

nfatin said...

terima kasih bnyak2x untuk tutorial ni.. =)

Amiir arif said...

thanks 4 helping!!!!!!!

dina said...

thanks!! hilang sudah kusut kat kepala nie..

dina said...

nak copy tutorial ni boleh ! nanti saya credit ye.. Thankss =)

Amirahsza said...

@Nur Irdina silakan...

Salmah A. said...

Thanks for this tutorial! :)

Unknown said...

thanks :') menjadi akhrnya.

Zaf said...

yess.!!!! menjadi.!! tq sangat2.. da seratus kali buat x jadi2.. akhirnya..

Assalamualaikum & Salam sejahtera It's been awhile since I post on my blog. Almost 2 years stop blogging Dalam masa 2 tahun ni, ...