Panduan Membuat Judul dan Deskripsi Blog Berada di Tengah Header

Panduan membuat judul dan deskripsi blog berada di tengah bagian header

Template Simple bawaan Blogger memiliki judul dan deskripsi blog yang rata kiri. Bagaimana apabila kita ingin membuatnya menjadi berada persis di tengah-tengah bidang layar seperti punya Kang Kombor ini?



Mudah, Kawan. Ikuti saja panduan di bawah ini.


Oh ya, panduan ini khusus untuk template Simple (Sederhana) yang tersedia di Blogger ya.

#1 Login ke Dasbor

#2 Klik tab Design pilih Edit HTML

#3 Centang Expand Widget Templates

#4 Mebuat judul berada di tengah, cari bagian seperti di bawah

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

#5 Tambahkan teks text-align:center; sehingga seperti di bawah:

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

#6 Membuat Deskripsi Blog berada di tengah, cari bagian seperti di bawah:

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

#7 Tambahkan teks text-align:center; sehingga seperti di bawah

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

#8 Simpan Template

Selesai. Seharusnya sekarang templatmu sudah memiliki Judul dan Deskripsi Blog yang berada di tengah.

Gampang bukan? Tentu saja. Kalau yang rumit-rumit Kang Kombor juga nggak bisaaaaa....

Komentar

  1. Makasih tutornya mas, insya allah akan dicoba, jadi ijin copas untuk folder tips trik blog di laptop saya.. :)

    BalasHapus
    Balasan
    1. Monggo Mas Tonny, silakan. Dipublikasikan ulang juga boleh.

      Hapus
  2. saya mau ijin crtl S, untuk disimpen kang, boleh ya ;)
    saya orangnya lupaan jadi harus safetiin yang kaya gini, hehe ;)

    BalasHapus
    Balasan
    1. dari pada ctrl+S mendingan visit aja blog ini tiap hari :D

      Hapus
    2. Ya monggo kalau mau disimpan. Kan nyimpennya bukan di komputer saya, hahaha...

      Hapus
    3. agam, kamu ngasih aku pe-er supaya posting tiap hari ya, Gam?

      Hapus
  3. Nek judhule diseleh ngisor pojokan pantes ora ya kang..? :P

    BalasHapus
    Balasan
    1. Ya pantes wae gumantung desain web-e kaya ngapa, Maz.

      Hapus
  4. Wah, ternyata mudah banget! Dulu saya pengen header blog saya kayak gitu, tapi gak tahu caranya.

    BalasHapus
  5. manstab sob... jadi nambah ilmu nich...

    BalasHapus
  6. sudah dicoba berkali2 tp belum berhasil juga nih mas :(

    BalasHapus
    Balasan
    1. kodenya belum diganti tuh, masih asli:

      .Header h1 {
      font: normal bold 80px Crafty Girls;
      color: #ee7f90;
      text-shadow: 2px 2px rgba(0, 0, 0, .1);
      }
      .Header h1 a {
      color: #ee7f90;
      }
      .Header .description {
      font-size: 140%;
      color: #666666;
      }

      Hapus
  7. makasih .. panduannya .. sekarang udah bisa ..

    BalasHapus
  8. thank you panduannya ilmunya mas.. sudah berhasil.

    BalasHapus

  9. klau ntuk teks comment caranya ngimana gan agar brada di tengah
    bisa ngk seperti commen saya ini diposisikan ke tengah


    sbelumnya thanks gan

    BalasHapus
  10. Komentar ini telah dihapus oleh pengarang.

    BalasHapus

Posting Komentar