Buat & rubah posisi Blog Title di kiri, tengah (Center) dan kananClick here to get more tutorials!

Blog title atau nama blog default blogger berposisi di sebelah kiri header blog. Perubahan untuk membuat tampilan blog lebih menarik sering harus melibatkan perbahan posisi blog title ini. Posisi di sebelah kiri yang memang merupakan posisi default bisa dengan mudah dirubah menjadi di kanan atau ditengah (center) dengan menambahkan kode css. Kode css dapat ditambahkan secara langsung di syntax .Header h1 yang bentuknya seperti contoh di bawah ini:

.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 {
      font: normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
      color: #3399bb;
      text-shadow: -1px -1px 1px rgba(0, 0, 0, .2);
}

atau dengan membuat syntax baru yang sama dengan penambahan property css yang diperlukan yang diletakkan di atas kode ]]></b:skin>

Cara merubah posisi Blog Title di Blogger Baru/Blogger Template Designer

1. Login ke BloggerKlik untuk login ke Blogger!
2. Dasbor (Dasboard)
3. Template
4. Backup/Restore Template. Panduannya bisa dibuka disiniKlik untuk mengikuti panduan cara melakukan backup/restore template.
5. Edit HTML
6. Template › Edit HTML
   • Procced (Lanjutkan)
   • Cari Kode : .Header h1 (jika ingin menambah di syntax default) atau cari kode ]]></b:skin> (jika ingin membuat syntax baru yang diletakkan di atas ]]></b:skin>)
   • Gunakan Ctrl + F untuk mempermudah & mempercepat pencarian.
   • Gunakan kode seperti berikut jika menggunakan syntax default:
     

     Blog Title di sebelah Kiri/Left

     .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);
           text-align:left;
     }

     Blog Title di sebelah Tengah/Center

     .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);
           text-align:center;
     }

     Blog Title di sebelah Kanan/Right

     .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);
           text-align:right;
     }

   • Apabila ingin menggunakan syntax baru yang diletakkan di atas kode ]]></b:skin>, buatlah kode css baru seperti berikut dan letakkan tepat di atasnya.
     

     Blog Title di sebelah Kiri/Left

     .Header h1 {
           text-align:left;
     }

     Blog Title di sebelah Tengah/Center

     .Header h1 {
           text-align:center;
     }

     Blog Title di sebelah Kanan/Right

     .Header h1 {
           text-align:right;
     }

   • Simpan Template/Save Template
7. Selesai...
8. Buka blog dan lihat di perubahan yang terjadi di header blog anda.

Posisi meletakkan kode css di atas ]]></b:skin>

.Header h1 {
      text-align:left;
}

]]></b:skin>

Bentuk kode lain dari header blog

Untuk beberapa template, seperti template tata letak dan beberapa template hasil download mungkin saja menggunakan kode yang berbeda. Sebagai contoh untuk template tata letak "Minima", kode yang berkauitan dengan blog title adalah sbg berikut:

#header h1 {
      margin:5px 5px 0;
      padding:15px 20px .25em;
      line-height:1.2em;
      text-transform:uppercase;
      letter-spacing:.2em;
      font: $pagetitlefont;
}

Atau seperti ini :

#header h1 {
      margin:5px 5px 0;text-align:right;
      padding:15px 20px .25em;
      line-height:1.2em;
      text-transform:uppercase;
      letter-spacing:.2em;
      font: normal bold 200% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif;
}

Lakukan hal yang sama seperti di atas dengan menambahkan text-align:left;, text-align:center atau text-align:right.

Contoh :

#header h1 {
      margin:5px 5px 0;
      padding:15px 20px .25em;
      line-height:1.2em;
      text-transform:uppercase;
      letter-spacing:.2em;
      font: $pagetitlefont;
      text-align:center
}

Jika ingin menambahkan kode baru di atas kode ]]></b:skin>, gunakan kode seperti ini :

#header h1 {
      text-align:center
}

]]></b:skin>