Cara Modifikasi Header Blog

Mungkin Anda ingin merubah tampilan awal dari Header Blog sesuai dengan selera Anda. Kali ini saya akan mencoba berbagi sedikit contoh Cara Modifikasi Header Blog dalam mengatur jarak antara Judul Blog dengan Deskripsi Blog.

Contoh tampilan awal Header Blog

Tampilan Awal Header Blog

Setelah di modifikasi :

Tampilan Header Blog Setelah Di Modifikasi

Untuk lebih jelasnya mari kita mulai dengan mengedit HTML Template Anda. Carilah kode seperti berikut :

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

Jika sudah ketemu aturlah jarak margin atas dan bawah dari judul blog tersebut, misal seperti 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);
margin-top: -25px;
margin-bottom: -80px;
}

Selanjutnya atur juga jarak untuk deskripsi blog, seperti ini misalnya :

.Header .description {
  font-size: $(description.text.size);
  color: $(description.text.color);
margin-top: 0px;
margin-bottom: -15px;
}

Aturlah margin (tulisan berwarna merah) sesuai keinginan Anda. Untuk melihat hasil sementara pilih preview/pratinjau, jika merasa sudah pas Simpan Template Anda.

Masih benyak berbagai cara untuk memodifikasi header blog menurut versi dan cara masing-masing, Anda dapat mempelajarinya disana.

Salam