Cara Design Header dengan warna

Banyak cara untuk mendesign tampilan Header blog ada yang mengunakan gambar maupun hanya teks saja  yang terpenting sesuai dengan keinginan kita sendiri dan pada artikel kali ini saya mencoba shere bagaimana cara mendesign Tampilan blog dengan mengunakan warna yang  cukup mudah untuk dimengerti

1.Login ke blogger

2.Klik Rancangan Tempelate

3.Klik edit HTML

4.Centang kotak: Expand Template Widget

Cari kode: /* Header

(Untuk mempermudah pencarian gunakan Ctrl+F)

 dibawah ini kode bawaan Tempelate Tersuai

/* Header

----------------------------------------------- */

.header-outer {

  background: $(header.background.color) $(header.background.gradient) repeat-x scroll top left;

  _background-image: none;<anda dapat merubah nya dengan mengunakan warna>

Contoh:

.header-outer {

  background: $(header.background.color) $(header.background.gradient) repeat-x scroll top left;

background: #DC143C;
background: -moz-linear-gradient(center top ,  #DC143C0%,#8B0000  100%);
background: -webkit-gradient(linear, left top, left bottom, from( #DC143C), to( #8B0000));

Selanjut nya tidak berapa jauh dari baris  kode di atas kita juga bisa merubah jenis font dan warna seperti di bawah ini

.Header h1 {

  font: $(header.font);<kita juga dapat menyesuaikan jenis size font dan warna>

  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);

}

Contoh:

.Header h1 {

  font: 20px Arial;

color:#FFD700;

  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);

}

.Header h1 a {

  color: $(header.text.color);

}

.Header .description {

  font-size: 130%;<anda dapat menyesuaikan jenis size font dan warna>

}

 Contoh:

.Header .description {

  font: 20px Arial;

color:#FFD700;

}

Semoga bermanfaat