Mengganti Background Header Blog Dengan Gambar

Kali ini kita akan membahas tutorial mengganti background header blog dengan gambar.Kenapa harus gambar??? Kan bisa pake warna??? kalau mengganti warna background header blog sudah kita bahas pada kesempatan yang lalu. Silakan Sobat baca cara mengganti warna background header blog.

Jika mengganti background header blog dengan gambar, blog kita akan terlihat lebih menarik. Pada dasarnya, gambar mewakili kata-kata yang ngga mungkin kita tuliskan. Jadi, header blog mewakili bagaimana karakteristik blog kita. Kalau blog Kumpulan Tutorial Ngeblog menggunakan gambar header yang kecil. Kenapa kok kecil???? Kan itu trik supaya halaman blog ini tidak berat saat loading...hehehehehe...

O iya, sebelum mengganti background header blog Sobat dengan gambar, perhitungkan dahulu ukuran gambar yang akan Sobat gunakan sebagai background header blog. Misalnya ukuran header blog Sobat lebarnya 800px. Jadi kita harus mempersiapkan gambar selebar 800px dengan tinggi terserah Sobat. Gambar bisa Sobat buat dengan Photoshop, CorelDRAW atau software pengolah gambar lainnya.

Gambar sudah siap, sekarang tinggal kita pasang. Silakan simak tutorial di bawah ini

=== Cara Mudah ===

Login ke akun Blogger milik Sobat > Tata Letak. Klik link edit pada bagian header blog.

Atur seperti pada gambar di bawah ini

Cari gambar di komputer Sobat dengan menekan tombol Telusuri. Jika sudah, proses upload akan berjalan. Setelah itu beri tanda pada “Selain judul dan keterangan” lalu klik tombolSimpan.

=== Cara agak sulit ===

Cara berikut ini cukup rumit karena kita harus menyimpan gambar kita ke salah satu image hosting yang ada di internet. Jika Sobat tertarik menggunakan cara manual, silakan simak langkah-langkah berikut ini

Langkah 1
Login ke akun Blogger milik Sobat > Tata Letak > Edit HTML. Klik Download Full Template untuk membackup template blog Anda.

Langkah 2
Cari kode berikut ini atau yang agak mirip, gunakan Ctrl+F untuk mempermudah pencarian kode pada template Blogger

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Jika sudah ketemu, tambahkan kode background:url(link gambar); sehingga kode nya jadi seperti ini

#header-wrapper {
background:url(link gambar);
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Ganti link gambar dengan lokasi penyimpanan gambar header blog Anda. Jika sudah selesai, klik tombol Simpan.

Semoga bermanfaat…