Kali ini saya akan membicarakan header wrapper yang digunakan pada tamplate baru, bukan template bawaan blogger. Saya hanya mencoba mengupas bagian header template dan atribut yang disertakan di dalamnya. Baiklah sekarang mari kita bahas bagian header wrapper blogspot. Ikuti langkah berikut.
Log in ke blogger
Klik Edit Template
Klik Lanjutkan
Cari kode seperti di bawah ini. Kode berikut mungkin berbeda, jadi sesuaikan saja dengan kode css yang ada pada template anda.
#header-wrapper{Catatan: untuk mengetahui kode warna kunjungi http://html-color-codes.info/
background:url(http://i1138.photobucket.com/albums/n524/blogonol/blogonol-1.png) 0 50% no-repeat; /* background header template menggunakan gambar dengan jarak terhadap posisi body atas 0 pixel dan kanan 50 persen tanpa pengulangan */
height:147px; /* tinggi background header template */
width:980px; /* lebar background header template */
margin:0 auto /* jarak background terhadap sisi header dengan penyesuaian otomatis */
}
#header{ /* atribut dalam header template */
color:#fff; /* warna text */
text-align:left; /* posisi tulisan rata kiri */
width:510px; /* lebar header bagian dalam */
float:left; /* posisi background header disebelah kiri */
overflow:hidden /* tidak menggunakan scroll atau disembunyikan */
}
#header h1{ /* atribut teks judul blog dalam header template */
line-height:1.2em; /* tinggi garis pada huruf */
font:bold 32px arial,serif; /* besar huruf dengan cetak tebal dan jenis huruf yang digunakan */
color:#000; /* warna huruf */
text-shadow:1px 1px 2px #4583aa; /* bayangan pada huruf */
margin:0; /* jarak tulisan dengan sisi background header template */
padding:35px 0 5px 80px /* jarak tulisan sisi atas, kanan, bawah, dan kiri background header template */
}
#header a{ /* atribut huruf setelah bersentuhan cursor */
text-decoration:none; /* tidak menggunakan atribut */
border:0; /* tidak menggunakan garis sisi */
color:#222 /* warna tulisan */
}
#header .description{ /* atribut deskripsi blog di bawah judul blog */
line-height:1.4em; /* tinggi garis huruf */
color:#000; /* warna huruf */
text-shadow:1px 1px 2px #4583aa; /* bayangan huruf */
font-size:22px; /* besar huruf */
margin:0; /* jarak huruf dengan background header template */
padding-left:85px /* jarak tulisan dengan sisi kanan bagian dalam background template */
}
#header img{ /* atribut gambar pada header wrapper */
margin-top:50px; /* jarak gambar dengan sisi atas header template */
height:52px; /* tinggi gambar */
margin-left:auto; /* jarak gambar dengan sisi kiri header template */
margin-right:auto; /* jarak gambar dengan sisi kanan header template */
border:0 /* gambar tidak menggunakan garis tepi */
}
Bagian header wrapper ini dapat diedit sesuai keinginan anda. Bila terdapat perbedaan, cari saja kemiripan dan sesuaikan dengan css yang ada pada template saudara. Mohon maaf bila terdapat kekurangan dan saya mengharap masukan serta pencerahan dari kawan-kawan blogger semuanya. Semoga dapat bermanfaat bagi kita semua. Amin. Selamat mencoba dan sukses selalu.
"keep spirits and do the best"
