Cara Jadikan Header Blog Center

Hurm, kalau korang upload header guna Page Elements, Blogger akan secara automatik align header korang ke kiri. Tak ada option untuk meletakkan header di tengah atau di kanan. So, camne nak buat header korang center macam header kat blog ni? 

Dengan menggunakan CSS (Cascading style sheet), korang boleh ubah alignment header korang. Tapi CSS ni bukan macam game CS(Counter Strike). Kalau CS cuma aim dan tembak, tapi CSS korang nak kena tau apa yang korang nak aim. Apa dorang punya ID, class name, etc. Aku pun tak berapa pandai, so jom check it out tutorial kat bawah ni. Actually tutorial bukan hanya menunjukkan cara untuk align header anda center, tetapi juga melibatkan cara bagaimana untuk align right dan align vertically.

First of all, korang kena tau "image placement method" yang korang pilih masa upload header di Blogger. "Image placement method" yang berlainan memerlukan kod yang berlainan.

Image placement method

Untuk masukkan kod

Pergi ke Dashboard >>> Design >>> Template Designer >>> Advanced >>> Add CSS 

 

1. “Behind title and description” option

Option ini akan menjadikan header tersebut sebagai background. Guna kod di bawah untuk align header korang. (Ia hanya akan align header, dan tidak akan align header title dan description)

• Align center
  #header-inner {background-position: center !important; width: 100% !important;}
• Align right
  #header-inner {background-position: right !important; width: 100% !important;}
  

2. Option “Instead of title and description” atau “Have description placed after the image”

Dengan option ini, image tersebut akan menjadi <img> HTML elemen. Guna kod di bawah untuk align header korang.

• Align center
  #header-inner img {margin: 0 auto !important;}

  
  

  #header-inner {text-align:center !important;} /*include this line if you are using Template Designer*/
  Kalau korang guna normal Layout template, cuma copy kod merah. Kalau korang guna Template Designer, copy kedua-dua kod merah dan hijau di atas.
  
  
  
  
• Align right
  #header-inner img {margin: 0 auto 0 300px;}
  Korang adjust left margin (300px dalam contoh kat atas) untuk tolak header ke kanan.

• Align vertically
  Exactly untuk push header ke bawah, so akan ada ruang kosong di atas header
  
  #header-inner img {padding-top: 50px ;}
  Adjust nilai padding-top (50px dalam contoh kat atas) sampai korang dapat posisi yang tepat.
  

3. Align Header Text (title and description)

Kod di bawah adalah untuk align header title and description. Ia boleh berfungsi dengan text-only header dan juga text di dalam option “Behind title and description”.

• Align center
  #header-inner {text-align: center ;}
• Align right
  #header-inner {text-align: right ;}
• Align vertically
   .titlewrapper {padding-top: 50px  !important;}
  Adjust nilai padding-top sehingga korang dapat kedudukan yang tepat. Untuk description, gantikan .titlewrapper kepada .descriptionwrapper
  

4. Letakkan header dan text sebelah-menyebelah

Actually untuk letakkan header dan text sebelah-menyebelah. Hanya berfungsi untuk option “Behind title and description” .

• Letakkan header di kiri dan text di kanan
  
  

   #header-inner {background-position: left !important; width: 100% !important;}

   .titlewrapper, .descriptionwrapper {padding-left: 100px !important;}
  Tambah nilai padding-left untuk menolak text ke kanan menjauhi header.
  
  
• Letakkan header di kanan dan text di kiri
  
  

   #header-inner {background-position: right !important; width: 100% !important;}

  .titlewrapper, .descriptionwrapper {padding-right: 100px !important;} 
  Tambah nilai padding-right untuk menolak text ke kiri menjauhi header.