Home
tutorial
Tips-Tips

31 March 2012

Tutorial : Pisahkan Header Dari Blog Content

Gadis Kidal Berceloteh...
31/03/2012

.Assalamualaikum !
Peacee Yo(!) ^_^v


Hello geng ! Kembali lagi Cik Lyssa bersama tutorialnya . Chewah . Dah rasa macam jadi pengacara TV pulak dah aih . HAHA . Mula lah tu , nak berangan tak ketahuan hala . waakkaka .

Haa . Banyak dah Lyssa terima aduan (cehh , aduan lah sangat..) yang mengatakan .. "Macam mana ni , saya dah buat header transparent dah , tapi kenapa header saya tetap ber-backgroundkan warna putih ? "

Haish . Memang lah . Guna simple template kan ? Haaa . Bagi pengguna simple template , korang boleh ikut tutorial ini , untuk pisahkan header dari blog content ...


1. Log in > Dashboard > Design >  Edit Html > Tick Expand Widget Templates

2. Tekan Ctrl F serentak , dan cari kod ini :

/* Mobile 

3. Ok . Dah jumpa ? Gud dear . Copy pula kod ini :

 .header-outer, .content-inner { background-color: transparent; }
.main-outer, .tabs-outer { background-color: $(content.background.color);} 

4. Dah ? Haaa. Pastekan di bahagian atas kod yang korang carikan tadi tu .

5. Cer PREVIEW dulu . Jadi tak ? Jadi tak ? Terpisah tak . hihi . Then muka korang akan jadi macam kerut-kerut gitu masa preview . Dan otak berpusing memikirkan :

"Kenapa ada shadow pulak kelililing blog ni ? Macam mana nak DELETE ?" 


6. Lek luuu bro ! Tak habis lagi .  Sekarang macam mana nak buang shadow tu ? Ikut ni :

7. Tekan Ctrl F serentak , dan Cari kod ini :

.content-outer { 

8. Jumpa dah  ? Haa . Ada nampak tak kat situ macam kod ni :

 .content-outer {
  -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);


  margin-bottom: 1px;
}

9. Ada kan ? Ada kan ? Sekarang Lyssa nak korang padam kod-kod tu semua . 

10. Then , PREVIEW balik , shadow-2 tu dah tak de kan ? Now , bolehlah korang SAVE :)


p/s : Yes ! Header korang dah betul-2 jadi transparent .. Means backgroud blog korang nampak lah kat belakang header tu kan ? Amacam ? Suka takkkk .


=Selamat Mencuba=

 


27 000 orang Pengomen Terhebat !!:

Haruno Hana 하나 said...

nak guna simple template tp x reti nk pisahkan header tu.. thanks kak lyssa.. nnti nk cuba :D

cik.blogger. sengal said...

ooo...

Lieyna Rosli said...

thank kak lyssa :)

arifah said...

Lyssa, tak de pun code yg tulis MOBILE tu?

Lisa Amstrong said...

lyssa napa tak boleh download Photoshop hari tu. Interrupt.

Harun Ar said...

Assalamu Alaikum,
Mantab, Makaseh....

Afifah Hayati said...

Dah cuba . menjadi pulak tu . Tq kak Lyssa comel ;)

arifah said...

Lyssa tutorial pisahkan header untuk template washed denim tak de ke?hehehehe...

eqa sulaika said...

hihi o0o...
baru tahu..ape lah sye ni
tepuk-tepuk dahi

Iklan Jawatan Kosong Terkini said...

Hurmmmm... menarik sgt2 info nih..
Terima Kasih..

ADe mase jemput semua ke blog sy yer... hehehe..

IKLAN JAWATAN KOSONG TERKINI DI MALAYSIA

Tq.. Lyssa.. for support..

husein riderz said...

tapi bagi saya, cara paling senang adalah jgn save pic tu dlm format JPEG tapi format PNG. Lagi senang,..x payah edit2 blog.

Eyla Azam ♥ said...
This comment has been removed by the author.
Ninie said...

dah buat tapi bukan header yang transparent , content saya pulak gedik nak transparent . acana ni ?

Fatin Shahira said...

ok cikgu lyssa ^_^.. camtu rupanyer.. hek hek hek

MaYa MustWany said...

bnyak kali fail wat header transprnt.

Patryccia Christella said...

cmne nak centerkan page ek?

Suhaila Rosli said...

Thanks Kak Lyssa :)

It's The Blog said...

Kak lyssa, mcam mna nk buat header mcam ni? www.littleblacktrain.blogspot.com tu kak sya, dia kata dulu boleh buat mcam tu. tpi skrang x leh jgak ke kak lyssa?

meyya :) said...

salam..kak lysa..cmne nak pisahkan header dr blog content ek? da try carik kod 2..tp x jmpe..then,.,.x jadik :(

Azielah Rahim said...

Thank sis..Menjadilah,happynyer!

Amanda Najwa said...

Thank sis ;)

Fauziah said...

Thanks, menjadii :) Pandai sys .. Kiss sikit :* Ehh, lupa sys dh ade boyfriend, mr.Pritt :)

chentawana said...

tak bolehh laaa jadi cam ni
Invalid variable declaration in page skin: Variable is used but not defined. Input: content.background.color
Error 500

Dea Haniy said...

dh paste kod tu.. tp x jadi la

Lowongan said...

wow...website yang keren..warnanya cool dan pink (romantis), salam kenal dari Lowongan Kerja

Lowongan said...

wow...website yang keren..warnanya cool dan pink (romantis), salam kenal dari Lowongan Kerja

♥ iqwa-niera ♥ said...

kak lisa..nak tnya..knapa bila dah delete code dkt .content-outer { ..automatik background kat post title and sidebar hilang..:(