Halaman

Isnin, Februari 13, 2012

Cara untuk 'center' kan header blog




Salam bahagia,


nota :
sebenarnya agak kerap juga kawan-kawan blog yang bertanya cara nak 'center' kan header blog. Selalunya saya akan amik masa juga nak terangkan kepada kawan-kawan (selalunya melalui medium chat di FB).. jadi saya fikir ada baiknya saya kongsikan sahaja di blog. Jadi, di masa depan, saya cuma perlu beri link n3 ini sahaja.. tak perlu nak buka balik nota saya dalam lappy.


Untuk jadikan header blog berada di tengah-tengah @ center, kita perlu masukkan kod header ke dalam template.


Sebelum masukkan kod :


1. Remove dahulu header yang sedia ada

klik pada 'remove image' dan 'save'

2. Upload image header yang hendak digunakan dan dapatkan image url/link image. Saya biasa upload ke picasa album sahaja.


upload gambar, kemudian right-klik dan 'copy image url'



Langkah untuk masukkan kod

1. log-in ke draft.blogger.com , klik menu "Template", klik "Edit html"

2. Tekan Ctrl F, dan cari kod  /* Header  , 

3. Kemudian masukkan kod dibawah


#header {
height: 240px;
border:0px solid ;
text-align: center;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiTicR4stK3RbIDL6fQcAgpzwOCoXE4yeZ139eqCiCUiFVaPyfn_gKasMY21xBHrjbzZq4JY5KxhM3f5mQYQaxeFShwP7wdmfGxMJpCC9c-wSkzUT0hBVuT5toriLlc_JYnfnFW7cR4MY/) no-repeat center;
}


bahagian yang berwarna merah dan saya strike tu.. sila tukorkan dengan url image header kome yer..

NOta :
height : 240px - tinggi header ni boleh ditukar ikut saiz tinggi header kome
no-repeat - supaya header tidak jadi berganda
center - supaya header berada di tengah-tengah blog



Bila dah siap, preview dulu.. incase ade error ke apa.. kalo takde error, tekan "save template". done.


Sekian. Selamat mencuba.


salam kasih sayang,
.

13 ulasan:

  1. terima kasih kakyong, berkongsi ilmu.

    BalasPadam
  2. hanie pun slalu letak banner header kat HTML coding ...

    BalasPadam
  3. pandai la akak ni. aida ni memang kurang ada masa nak edit blog. tu pun dpt present menang GA. tu yg lawa skit la blog tu :)

    nota kaki : da singgah blog aida lom ari ni? ~ AIDA'S HOME SWEET HOME ~

    BalasPadam
  4. ita takde header...
    tapi bagus jugak kan kak...
    leh jugak ilmu...

    BalasPadam
  5. selalunya buat header adjust saiznya.kehkeh..

    BalasPadam
  6. oooo..gitu...patut la hr tu kak yong suh saya centrekan header..saya nganga..jenuh ejas dibuatnya...hahaa

    BalasPadam
  7. suka guna html coding compare ngan upload tu coz nanti susah nak adjust..

    BalasPadam
  8. TQ kakyong syer..

    Tp macam kat lappy myra bahagian right click takdak pun 'copy image URL' yg ada copy image je ;)

    BalasPadam
  9. Gitu ghopenye, baghu le mike tahu. Teghime kasih la ye. :-)

    BalasPadam
  10. izan dah lama tak godek2 blg kakyong...lagi2lah header tu.

    mekasih atas entry ni. ada masa boleh cuba.

    BalasPadam
  11. salam kak yong..info yg berguna.. puas Aya carik macam mana caranya nak centerkan header blog..akhirnya jumpa..kalau Aya nak copy entry ni boleh? nak post kat blog and untuk simpanan di masa depan..nanti Aya tak perlu nak carik lagi..=)

    BalasPadam
  12. macam2 tutorial dah jumpe..tp yg ni jer yg jadix..thanks!!!

    BalasPadam

Terima kasih atas komen kome..