Menampilkan gambar sebagai Background Header

Seingkali kita lupa atau tidak menyadari bahwa sebenarnya bagian header atau kepala blog selain bisa dipergunakan sebagai media penyampai misi blog sekaligus identitas blog, juga mampu dimanfaatkan untuk memperindah tampilan blog. Terlebih bagian header merupakan bagian blog yang selalu pertama kali muncul dan menjadi sorotan pandang utama pembuka blog. Niatan untuk melanjutkan menjelajah isi blog terkadang juga juga bergantung kepada tampilan header blog yang tampak pada saat blog dibuka. Satu cara untuk memperindah tampilan header dapat dilakukan dengan memberi header sebuah gambar yang berupa nama blog dalam bentuk gambar ataupun gambar-gambar lain yang mencerminkan isi blog. Tentunya gambar yang di pergunakan harus diupayakan supaya tidak terlalu besar muatanya, sehingga kecepatan loading blog juga tidak terkendala. Untuk melakukan ini kita akan mencoba mencarikan solusi agar usaha mempercantik blog tidak justru menjadi kendala baru bagi anda.

Langkah pemasangan gambar :

1. Amankan template.

LOGIN BLOGGER

>

TATA LETAK

>

EDIT HTML

>

DOWNLOAD TEMPLATE-LENGKAP

>

SIMPAN-ke FOLDER-PC

2. Cari: #header atau #header-wrapper

TATA LETAK

>

EDIT HTML

>

CARI #header

>

KASIH-KODE BACKGROUND

>

SIMPAN/SAVE TEMPLATE

3. Cara mencari dan mengetahui #header :
- sering ditulis sebagai #header atau #header-wrapper
- Setelah masuk "Edit HTML", gunakan keyboard dan tekan Ctrl+F untuk memudahkan pencarian.
- Kode #header berada di bagian atas ruang "Edit HTML". Di atasnya persis sering diberi KODE pengenal seperti : /* Header------------------ */
- KODE header biasanya di ikuti KODE lain, seperti:
#header {
padding-top:15px;
padding-$endSide:0;
padding-bottom:10px;
padding-$startSide:110px;
position: relative;
}

atau :

#header-wrapper {
background:#fff;
margin:22px 0px 0px 0px;
padding:8px 0px 0px 0px;
color:#000;
}
- Seandainya pada #header tidak ada KODE --> width:...px; , untuk mengetahui lebar header, anda bisa mengetahuinya dengan cara mencari KODE width, yang biasanya sama besarnya dengan width pada header. KODE ini terletak pada #footer atau #outer-wrapper.
Nilainya rata-rata di atas 660px.
- Nilai tersebut yanga menjadi ukuran lebar gambar header. Untuk tingginya silahkan anda cari dengan cara seperti cara mencari lebarnya (width). KODE untuk tinggi adalah height: ...px; Besarnya biasanya di atas 100px dan dibawah 200px.

4. Memasang gambar untuk header :
- beri tambahan KODE ---> background: url(alamat gambar);, sehingga bentuk sebenarnya seperti berikut:

#header-wrapper {
background:#fff url(http://www.xxx.com/xxx/xxcx.jpg); (atau #fff bisa dihilangkan)
margin:22px 0px 0px 0px;
padding:8px 0px 0px 0px;
color:#000;
}
- Apabila gambar mempunyai besar yang sama dengan ukuran header (lebar dan tingginya), KODE menjadi :
background:#fff url(http://www.xxx.com/xxx/xxxx.jpg) no-repeat;

background:#fff url(http://www.xxx.com/xxx/xxxx.jpg); --> bila lebar dan tinggi gambar lebih kecil.

background:#fff url(http://www.xxx.com/xxx/xxcx.jpg) top repeat-x; --> bila hanya bagian tinggi yang sama

background:#fff url(http://www.xxx.com/xxx/xxxx.jpg) top repeat-y; --> bila hanya bagian lebar yang sama

5. Untuk membuat gambarnya anda bisa menggunakan Adobe Photoshop, hunting gambar atau meminta tolong pembuat gambar logo gratis .

6. Untuk membuat gambar deengan muatan entheng, gambar bisa anda COMPRESS di alamat ini : http://tools.dynamicdrive.com/imageoptimizer/

7. Setelah KLIK "Simpan Template", anda bisa lihat hasilnya dengan membuka blog di tab yang lain.

Selamat mencoba, semoga berhasil dengan baik !