Selasa, 19 Maret 2013

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
Comments
2 Comments

2 komentar:

  1. Sobat, kunjungan balik dari ELTELU -:[SEMAR BINGUNG'S WEBLOG]:-

    Terimakasih atas kunjungan serta berkenannya mengeposkan komentar di blog saya, dan tidak lupa saya sampaikan salam kenal dan salam berbagi. :)

    Oh ya, btw mohon maaf apabila komentar ini tidak sesuai dengan topik yang diuraikan dalam artikel tersebut di atas.

    BalasHapus
    Balasan
    1. Terima kasih Atas kunjungan nya Mas,btw saya Sangat tertarik sekali atas Tutorial yang di berikan di ELTELU -:[SEMAR BINGUNG'S WEBLOG]:- I I like u

      Hapus

TERIMA KASIH ATAS KOMENTAR DAN KUNJUNGAN ANDA