Home
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
Selanjut nya tidak berapa jauh dari baris kode di atas kita juga bisa merubah jenis font dan warna seperti di bawah ini
.Header h1 {
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:
background: -moz-linear-gradient(center top , #DC143C0%,#8B0000 100%);
background: -webkit-gradient(linear, left top, left bottom, from( #DC143C), to( #8B0000));
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));
.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
