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....
Bantu saya dengan membagi artikel di atas ke media sosial:

Tentang Kang Kombor

Seorang blogger desa, alumni Perguruan Pirikan, pernah belajar Manajemen di FE UPH, pernah bekerja sebagai penjual (salesman), punya pengalaman seputar pengembangan bisnis (busines development) dan manajemen proyek (project management).

25 komentar

Click here for komentar
Terima Kasih Sudah Berkomentar
Senin, Januari 16, 2012 12:32:00 PM

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

Balas
Terima Kasih Sudah Berkomentar
Senin, Januari 16, 2012 12:51:00 PM

Monggo Mas Tonny, silakan. Dipublikasikan ulang juga boleh.

Balas
Terima Kasih Sudah Berkomentar
Senin, Januari 16, 2012 5:54:00 PM

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

Balas
Terima Kasih Sudah Berkomentar
Selasa, Januari 17, 2012 8:05:00 AM

dari pada ctrl+S mendingan visit aja blog ini tiap hari :D

Balas
Terima Kasih Sudah Berkomentar
Selasa, Januari 17, 2012 11:34:00 AM

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

Balas
Terima Kasih Sudah Berkomentar
Selasa, Januari 17, 2012 11:35:00 AM

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

Balas
Terima Kasih Sudah Berkomentar
Kamis, Januari 19, 2012 8:02:00 AM

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

Balas
Terima Kasih Sudah Berkomentar
Sabtu, Januari 21, 2012 1:17:00 AM

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

Balas
Terima Kasih Sudah Berkomentar
Sabtu, Januari 21, 2012 12:51:00 PM

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

Balas
Terima Kasih Sudah Berkomentar
Sabtu, Januari 21, 2012 12:54:00 PM

Sekarang jadi tahu caranya kan, Bro.

Balas
Terima Kasih Sudah Berkomentar
Minggu, April 01, 2012 7:11:00 PM

manstab sob... jadi nambah ilmu nich...

Balas
Terima Kasih Sudah Berkomentar
Rabu, Mei 02, 2012 3:06:00 PM

kalo gambarnya biar di tengah gimana gan?

Balas
Terima Kasih Sudah Berkomentar
Senin, Juni 25, 2012 12:24:00 AM

sudah dicoba berkali2 tp belum berhasil juga nih mas :(

Balas
Terima Kasih Sudah Berkomentar
Rabu, Juli 04, 2012 12:49:00 PM

makasih .. panduannya .. sekarang udah bisa ..

Balas
Terima Kasih Sudah Berkomentar
Minggu, Juli 22, 2012 3:06:00 AM

follback ya

Balas
Terima Kasih Sudah Berkomentar
Kamis, September 13, 2012 8:50:00 AM

thank you panduannya ilmunya mas.. sudah berhasil.

Balas
Terima Kasih Sudah Berkomentar
Senin, September 17, 2012 1:28:00 PM

terimakasih sudah mampir

Balas
Terima Kasih Sudah Berkomentar
Senin, September 17, 2012 1:28:00 PM

dibuat manual saja pakai alt img

Balas
Terima Kasih Sudah Berkomentar
Senin, September 17, 2012 1:31:00 PM

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

Balas
Terima Kasih Sudah Berkomentar
Senin, September 17, 2012 1:33:00 PM

sama-sama

Balas
Terima Kasih Sudah Berkomentar
Senin, September 17, 2012 1:34:00 PM

oke bos

Balas
Terima Kasih Sudah Berkomentar
Senin, September 17, 2012 1:42:00 PM

sama-sama mbak nia

Balas
Terima Kasih Sudah Berkomentar
Kamis, September 26, 2013 4:29:00 PM


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


sbelumnya thanks gan

Balas
Terima Kasih Sudah Berkomentar
Kamis, September 26, 2013 4:30:00 PM Komentar ini telah dihapus oleh pengarang.
Terima Kasih Sudah Berkomentar
Sabtu, Oktober 24, 2015 9:19:00 AM

Nice info. Thanks for sharing.

Balas

Join This Site Show Konversi KodeHide Konversi Kode Show EmoticonHide Emoticon

Silakan berkomentar dengan sopan