Apr 14, 2011

Pisahkan header dari blog untuk template designer

Assalamualaikum dan hai kepada korang yang sedang membaca belog ini! HAHA. Dah nak dekat seminggu juga aku tak update belog ni ya? Aku tengok semua orang busy update itu ini. Dalam sehari banyak gila entry yang keluar. Dari pagi ke malam aku tengok asyik ping entry aje. Daripada orang yang sama pulak tu. Hmm. Bergeliga sangatlah otak tu kan, baguslah tu,HEHE.

By the way, aku ada buat belog baru, khas untuk dunia novel, yeah! Nama pun novel kan? Mestilah novel aje,HAHA. Dah lama jugak sebenarnya aku menulis ni tapi tak pernah serius dan tak pernah habis cerita. So, kira kali ini aku dah seriuslah konon nak menulis cerita kan. Korang semua amat dialu-alukan untuk membaca. Boleh klik gambar kat sidebar tu. 

Akey, berbalik pada tajuk kita ni. Banyak juga yang tak dapat nak buat header tu terpisah, terutama bagi pengguna template designer, di mana mereka menggunakan template yang telah disediakan oleh pihak blogger sendiri. Mesti banyak yang teringin nak buat macam blog- blog lain kan? Buat header transparent yang cantik dan blog yang menawan juga! Tapi malangnya tak dapat buat semua tu sebab template korang lain dan blog korang kelihatan seperti ini.



Mesti sia- sia kan kalau dah buat header transparent tapi bila letak kat blog jadi macam tu pulak. So, aku nak tanya, korang nak buat header korang terpisah tak dari blog post korang? Nak? Jom..

Mula- mula sila Sign in ke dashboard korang terlebih dahulu. Pergi ke Design --> edit Html. Sekarang ni korang klik Expand widget pulak. Tengok contoh dalam gambar kat bawah ni.



Sekarang, tekan Ctrl + F atau F3 kat keyboard korang untuk memudahkan pencarian k. 
Cari code ni.

 /* Mobile  
 

Kalau dah jumpa code tu, sila copy code bawah ni pulak.

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


Paste code tadi ( code kat atas ni ) sebelum code   /* Mobile    .

Dah? Cuba preview dahulu. Header korang mesti dah terpisah kan? 


Tapi nampak tak ada shadow kat tepi- tepi tu? Siapa tak nampak memang ada tanda- tanda dah tu. Hehe. Akey, sekarang ni kita nak buang shadow tu sebab nampak tak cantik. Ini terpulang kalau korang nak buat atau tak. Bagi yang nak buang tu, sila cari code ni k.

 .content-outer {  


Mesti korang akan nampak code macam ni kan?

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

Akey, sekarang ni, korang padam atau buang code tu semua. Cuba preview kalau shadow tu ada ke tak. 

Jeng! Jeng! Shadow is gone forever!

Kalau dah tak ada shadow ( bayang- banyang ) dan error pun kosong, korang boleh dah save template korang. Yeahh.. sila tepuk tangan sekarang. ^^

Terima kasih kerana sudi meluangkan masa untuk bertutorial dengan saya! Jangan lupa jenguk blog " Dunia Novelaku " . Lalala....  :D


updated :  aku tak pasti kalau code template lain macam ini. Ada yang tak dapat cari code mobile tu. Mula- mula akupun macam itu. Tapi bila aku scroll dan cari perlahan- lahan, eh jumpa pulak. So, kalau still tak ada, cuba pakai template ini untuk memudahkan korang k =) trimazz.


42 comments:

  1. wahh . template macam ni pun boleh kasi transparent ?ingat x boleh . bagus ni . thannks SE:)

    ReplyDelete
  2. @Apit Biebs,hehe, segalanya ade kemungkinan klo nak..ececeh,btw,sme2

    ReplyDelete
  3. kak , yg bawah tu jadi transparent sekali lah . dan macam mane nak rapatkan header tu dengan body ?

    ReplyDelete
  4. tak jumpa lah code nie ( /* Mobile )...camne nie???

    ReplyDelete
  5. datang singgah tinggalkan jejak...balas kunjungan you.. and i found that this blog is so cute and the entry sangat berguna..like it..(^________^)..


    akan dibuat reference ni..tapi right now busy sikit..hehee...nak follow jugak...;)

    ReplyDelete
  6. @sweetlittlePUMPKIN,mmg kt bwh tu jd transparent, sbb tu buang shadow n cb wt border keliling outer tu,br npk cntk :)

    ReplyDelete
  7. @ct mysera^^, mgkn mcm SE kot, cb scroll cr pelan2 ekk..mst ade punyer..

    ReplyDelete
  8. xjpe un kod nie /* Mobile....emmm=(

    ReplyDelete
  9. lepas tu macam mane nak bagi border kat keliling body tu je ?

    ReplyDelete
  10. and , macam mane nak rapatkan header tu ? kalau ikut tuto akak yang sebelum ni tak jadi lah ?

    ReplyDelete
  11. cik syafieka
    thank for the tuto..
    tp mcm mane nk letak border kt body??
    sy buat
    dgn header2 skali ade border

    ReplyDelete
  12. assalamualaikum...follow ku ika ^^ hihihi

    ReplyDelete
  13. @sweetlittlePUMPKIN, tuto akak sblm ni tuk tmplate len, x masuk dgn tmplate dsigner..

    ReplyDelete
  14. Thanks akak ! Geniouslah akak nih ! Sya guna chibidles akak and try tuto akak yang nih ! Memang jadik . Love you .

    ReplyDelete
  15. @Syuu, x genius mn pn..byk ag yg genius :)

    ReplyDelete
  16. xjd lha. still ada shadow bahagian atas ;(

    ReplyDelete
  17. terima kasih untu tutorial awak..^^

    ReplyDelete
  18. yay! da jadi! trimas kak! ;D

    ReplyDelete
  19. THANKS KAK!!! :)))) menjadi :O

    ReplyDelete
  20. xjumpe lah /* Mobile ...camne nie SE?

    ReplyDelete
  21. kak , kenapa saya punya ada background ?

    ReplyDelete
  22. Akk, kenapa yg body tu transparent?

    ReplyDelete
  23. akk ,saya punya ada lagi shadow kat bawah . yg tepi dah okay :(

    ReplyDelete
  24. Akak? Knp bila sy buat shadow diluar blog, dia tak jd. Mcm pelik je -.- cube tgk http://flyingtight.blogspot.com, maaf blog tak siap lg. Nak tny tu je, akak inform sy kat facebook ea? http://facebook.com/fateha.fb/

    ReplyDelete
  25. yeah..menjadi.blog makin lawa..hehehe..thanks..^^

    ReplyDelete
  26. tQ..
    mmg jd..tp nape footer die p0n kluar gak:(..xnk ah cmtu..ade ape2 yg boleh di buat??

    ReplyDelete
  27. .content-outer {
    code toh tadee laaa -,-

    ReplyDelete
  28. Paste code tadi ( code kat atas ni ) sebelum code /* Mobile ... itu sy x fhm ... cm mna tue ar ? ajar .. d mna mw letak atas ka bawa ... mcm mna ? LOL

    ReplyDelete
  29. Kak , Jumpe jea kod-2 tu , tp xde prbezaan pom . mcm mne nihh ?

    ReplyDelete
  30. salam,
    firstly,sy nak say thanks la diatas tutorial yg awak bagi..cuma saya agak pelik kenapa kat header blog saya tak boleh tekan home?

    ReplyDelete