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=

 

KONGSIKAN ARTIKEL INI..
Previous
Next Post »

27 000 orang Comment Di Sini

Write 000 orang Comment Di Sini
Unknown
AUTHOR
March 31, 2012 at 9:11 PM delete

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

avatar
Nur Arifah
AUTHOR
March 31, 2012 at 9:15 PM delete

Lyssa, tak de pun code yg tulis MOBILE tu?

avatar
Anonymous
AUTHOR
March 31, 2012 at 9:16 PM delete

lyssa napa tak boleh download Photoshop hari tu. Interrupt.

avatar
Harun Ar
AUTHOR
March 31, 2012 at 9:17 PM delete

Assalamu Alaikum,
Mantab, Makaseh....

avatar
Afifah Hayati
AUTHOR
March 31, 2012 at 9:28 PM delete

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

avatar
Nur Arifah
AUTHOR
March 31, 2012 at 9:31 PM delete

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

avatar
ika sulaika
AUTHOR
March 31, 2012 at 9:50 PM delete

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

avatar
Unknown
AUTHOR
March 31, 2012 at 10:14 PM delete

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..

avatar
March 31, 2012 at 10:50 PM delete

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

avatar
Unknown
AUTHOR
March 31, 2012 at 11:56 PM delete This comment has been removed by the author.
avatar
Ninie
AUTHOR
April 1, 2012 at 12:28 AM delete

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

avatar
Fatin Shahira
AUTHOR
April 2, 2012 at 8:58 AM delete

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

avatar
Anonymous
AUTHOR
April 5, 2012 at 12:18 AM delete

bnyak kali fail wat header transprnt.

avatar
12Priceless
AUTHOR
May 4, 2012 at 11:05 AM delete

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?

avatar
meyya :)
AUTHOR
June 14, 2012 at 6:20 PM delete

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

avatar
AzielahRahim
AUTHOR
June 26, 2012 at 9:39 PM delete

Thank sis..Menjadilah,happynyer!

avatar
Fauziah
AUTHOR
August 14, 2012 at 3:20 PM delete

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

avatar
chentawana
AUTHOR
January 14, 2013 at 8:06 PM delete

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

avatar
Unknown
AUTHOR
February 10, 2013 at 2:13 AM delete

dh paste kod tu.. tp x jadi la

avatar
Lowongan
AUTHOR
March 1, 2013 at 3:28 PM delete

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

avatar
Lowongan
AUTHOR
March 1, 2013 at 3:29 PM delete

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

avatar
May 19, 2013 at 5:00 PM delete

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

avatar

.Assalamualaikum.
.Sila Tinggalkan Comment Anda Di Sini.
SATU pun jadi lah ! hehe. EmoticonEmoticon