Header, merupakan suatu elemen terpenting kedua setelah Main atau isi dari blog (postingannya).
Pada umumnya, header pada suatu template blog mempunyai background yang fill dengan warna, alias penuh dengan 1 warna saja. Memang, ada tujuannya mengapa dibuat seperti itu.
Tentunya agar blog memiliki kecepatan loading yang ringan, karena tidak perlu memuat gambar tambahan terlebih dahulu.
Tetapi, apabila gambarnya sudah dikompres terlebih dahulu, pasti tidak menyebabkan loading blog menjadi berat dan lambat.
Nah, bagi anda yang sudah memiliki gambar yang sudah dikompres dan ingin dijadikan background header untuk blog kesayangannya, silahkan ikuti beberapa langkah yang Blog KodeJarwo tulis berikut ini.
Langkah Awal: Persiapan
- Tentunya, pertama silahkan anda siapkan link gambar yang nantinya ingin dijadikan background. Bila anda belum memiliki linknya, anda dapat mengupload gambar di blog, lalu ambil linknya.
- Lalu, lihat apa nama elemen header di blog anda. Bila anda belum tahu cara mencarinya, silahkan ikuti langkah berikut ini. Tetapi bila sudah mengetahui caranya, silahkan lompat ke langkah terakhir.
Usahakan gambar yang anda gunakan berukuran lebih dari 1000px x 150px
1. Pertama, buka blogger.com > Tema > Edit HTML.
2. Lalu, klik di sembarang kode, dan tekan Ctrl + F.
3. Bila kotak pencarian sudah muncul, silahkan ketik dan cari kode:
<header [atau] header 4. Bila sudah ketemu, biasanya bentuknya ada 2 macam (setiap template berbeda-beda). Silahkan anda pilih dan sesuaikan dengan bentuk yang di blog anda. Lalu ikuti langkah dibawahnya.
Bentuk 1: <header>
Cara:
1. Silahkan anda lihat dibawah kode tersebut, biasanya bentuknya seperti ini:
2. Silahkan anda lihat apa nama class/idnya. Pada gambar diatas, nama classnya (atau bisa juga berbentuk id) adalah
site-header.3.
site-header itulah nama elemen header anda.Bentuk 2: "header" atau 'header'
Cara:
1. Silahkan anda lihat kode apa yang ada di dalam tag header itu, biasanya berbentuk seperti ini:
2. Bisa anda lihat diatas, nama elemen untuk CSS header blognya adalah
header-wrapper.3. Simpan kode tersebut (entah di dalam notepad atau ditulis di kertas).
- Sekarang anda sudah menyimpan link gambar dan nama elemen header blog. Langkah selanjutnya yang perlu anda lakukan adalah pemasangan link gambar tadi ke elemen header blognya.
Langkah Terakhir: Pemasangan
- Silahkan anda buka lagi template editor di blog anda. Lalu cari salah satu kode seperti berikut ini didalam tag
<b:skin>:
#nama-elemenatau.nama-elemenataunama-elemen
Ganti "nama-elemen" dengan nama elemen header (yang sudah anda dapatkan pada langkah awal tadi).
Bila sudah ketemu salah satu dari ketiga kode diatas, silahkan cari atribut background didalamnya. Misal bentuknya seperti ini:
#nama-elemen {..; background:.... ;..}
Silahkan hapus atribut tadi dan ganti dengan yang ini:
background: url(...link url gambar anda...);
Ganti "... link url gambar anda..." dengan link gambar yang ingin dijadikan background header.
Selesai, silahkan simpan template anda.
Bagaimana? Apakah background header di blog anda sudah berubah? Bila tidak, berarti anda tidak mengikuti langkahnya dari awal. Silahkan coba lagi atau bertanya kepada saya dengan berkomentar di postingan ini.