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

Reply
avatar
arifah
AUTHOR
March 31, 2012 at 9:15 PM delete

Lyssa, tak de pun code yg tulis MOBILE tu?

Reply
avatar
Lisa Amstrong
AUTHOR
March 31, 2012 at 9:16 PM delete

lyssa napa tak boleh download Photoshop hari tu. Interrupt.

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

Assalamu Alaikum,
Mantab, Makaseh....

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

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

Reply
avatar
arifah
AUTHOR
March 31, 2012 at 9:31 PM delete

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

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

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

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

Reply
avatar
husein riderz
AUTHOR
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.

Reply
avatar
Eyla Azam ♥
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 ?

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

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

Reply
avatar
MaYa MustWany
AUTHOR
April 5, 2012 at 12:18 AM delete

bnyak kali fail wat header transprnt.

Reply
avatar
April 8, 2012 at 6:28 PM delete

cmne nak centerkan page ek?

Reply
avatar
It's The Blog
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?

Reply
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 :(

Reply
avatar
Azielah Rahim
AUTHOR
June 26, 2012 at 9:39 PM delete

Thank sis..Menjadilah,happynyer!

Reply
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 :)

Reply
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

Reply
avatar
Dea Haniy
AUTHOR
February 10, 2013 at 2:13 AM delete

dh paste kod tu.. tp x jadi la

Reply
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

Reply
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

Reply
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..:(

Reply
avatar