Mar 13, 2011

rapatkan header dengan post blog/content

Halluuu.. tempat korang hujan tak? Kat sabah ni dah banjir gegiler! Nasib baik takde pape gak,huu. Tadi aku check formspring jap. Ada satu lagi soalan yang kena tanya kat aku ni. Semalam dah tolong sorang member belog touch up belog dia. Alhamdulillah, dah siap! Tapi tak tahulah kalau dia suka atau tak.

Akey, sebenarnya kan.. soalan tu kan. macam ni..



Kecian kalau tak tolong. Akupun tak tahu sape r nama dia ni. Segan kot nak gtau, kuikuikui. Bukan ape, aku just nak tahu nama dan belog korang tu sebab kalau korang tanya atau nak request apa- apa kat aku ni, aku boleh inform kat korang. Taklah aku terkial- kial nak pikir, camne aku nak gtau korang. Kalau malu nak gtau url belog, fine, gtau emel atau apa- apa je yang boleh aku pergi untuk inform kalau aku dah siap. HUHU.

HAHA, mesti bosan dok dengar aku membebel ni. Akey, kita teruskan dengan tutor kita ni.

First, pergi ke Design--> edit hmtl --> klik expand widget

pastu klik f3 pulak untuk memudahkan pencarian. Cari code ni.

/* Header
----------------------------------------------- */


Korang akan jumpa code # Header { kat bawah code yang korang cari tadi. Ada tak?

Akey, kat sana ada code 


 border: 6px solid $headerBgColor;



Akey, tulisan berwarna tu korang tukar menjadi 0 . Sekarang, cuba preview dulu. Kalau dah menjadi, bolehlah save!


-------------------------------------------------------------------------------------------------------***

Bagi template macam aku ni pulak. Korang pergi ke Design --> edit html --> klik expand widget.

Sama jugak macam tadi, cari code header tu. Yang ni aku yang godek sendiri- sendiri. Sebab code template ni berbeza dengan tuto yang aku cari atau jumpa. Akey, dah? 



Kalau ikut aku, aku cuma besarkan saiz- saiz header supaya senang dan nampak cantik sikit. Ketiga- tiga perenggan code tu, yang dah aku gariskan tu kena ubah saiz. Well, kalau korang tak nak pun takpe kot. Sekarang ni, apa yang korang perlu buat ialah...


Tukar saiz kat bahagian yang ada anak panah tu. Lagi besar saiz yang korang letak, lagi rapatlah header korang ke content korang. Header tu akan turun ke content korang mengikut nombor pixel yang korang letak. Pandai- pandailah adjust mengikut template k?

Jangan lupa untuk backup template terlebih dahulu. Takut ada yang nangis bergolek- golek kalau template rosak nanti, hee..

-out-

22 comments:

  1. kak , tak de lah kod yg kak suruh cari tu ?

    ReplyDelete
  2. @sweetlittlePUMPKIN,xknla xde code header? cb cr plhn2..aseny ade kot..

    ReplyDelete
  3. kalau nk buad neh, kene gne template designer ea ?

    ReplyDelete
  4. @Lolly..xla, sume header blh rapatkn kt post/content..bgntung pd code tmplate msg2..yg akak wt ni ade dua jns. 1 tuk classic n kdua tuk designer..yg kdua tu dr akak pye tmplate. klo lolly nk wt knela tgk btl2 code tu. sb stiap tmplte berbeza. ade jgk tmplate yg headernye mmg da set n xblh ubh,yg tu mmg xblh nk tlg..sb klo tkr/ubh header yg ade akn hlg n tmplate jd rosak. Lolly gn tmplate ape? - pjg plk pjelasan ni.. =.=

    ReplyDelete
  5. sis ,
    sis guna template ape ?
    aina dh cari tpy tk jumpe )=

    ReplyDelete
  6. @aina..aina, akak gn tmplate designer... akak ade wt dua cra kt cn..aina da try ke dua2?

    ReplyDelete
  7. aina juga gune template designer .
    tpy tk jumpe own code tuh )=

    ReplyDelete
  8. @aina..aina, sila mcg akak kt fb..akak cb tgk mslhnya k.. sbb step pertama tu tuk yg classic tmplate klo x slp..

    fb akak

    ReplyDelete
  9. gne template designer tp ade code yg ini je.. nk wat cmne eyh?


    /* Header
    ----------------------------------------------- */
    .header-outer {
    background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
    _background-image: none;
    }

    .Header h1 {
    font: $(header.font);
    color: $(header.text.color);
    text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
    }

    .Header h1 a {
    color: $(header.text.color);
    }

    .Header .description {
    font-size: $(description.text.size);
    color: $(description.text.color);
    }

    .header-inner .Header .titlewrapper {
    padding: 22px $(header.padding);
    }

    .header-inner .Header .descriptionwrapper {
    padding: 0 $(header.padding);
    }

    ReplyDelete
  10. @Luna Chempaka, header awk bkn da rapat sdia ke dgn blog content?

    ReplyDelete
  11. knp saye tak jumpe code tuu ? help me :)

    ReplyDelete
  12. sis, why ieza try taleh ? code ieza mcm Cempaka tu, tpi takde rapat pun. musyhkil ni :(

    ReplyDelete
  13. @iezaa,akak ase ieza pki tmplate d blog ni, btl x? cb ieza wt header tinggi 400px..not sure klo blh tp akak wt mmg rpat

    ReplyDelete
  14. taleh jua lha kak. ada something wrong kud, penat ja :')

    ReplyDelete
  15. Syafeika edora npe sye tak jmpe pon code header tu ?

    ReplyDelete
  16. Akak mintak tolong boleh? Kalau utk footer pulak mcm mana nk buat eh?

    ReplyDelete
  17. eika, tuto yg ni utk rapatkan header..macam mana pulak kalau headernya ke tepi...?? nak ketengahkan header tu cam mana?

    ReplyDelete
  18. @afina rahmat,, kne ubah bhgian margin.. tp klo pki tmplate dr blogger ni sush ckt

    ReplyDelete