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

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest