Jika dilihat dari kode CSSnya header yang terdapat pada (langkah 3 disini) memiliki kode seperti dibawah ini :
/* HEADER WRAPPER
==================================================== */
#header-wrapper {
width:960px;
height:150px;
background:#191919;
}
#header-inner {
background-position: left;
height:150px;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
text-align: left;
color:#FFF;
}
#header h1 {
padding:40px 20px 0 10px;
line-height:1.2em;
text-shadow:2px 2px 2px #fff;
text-transform:uppercase;
letter-spacing:.2em;
}
#header a {
color:#FFF;
text-decoration:none;
}
#header a:hover {
color:#FFF;
}
#header .description {
margin:0 5px 5px 0 ;
padding:0 20px 0 10px;
max-width:700px;
letter-spacing:.2em;
color:#FFF;
}
#header img {
margin-left: auto;
margin-top: auto;
}
Dari kode header diatas terlihat bahwa header memiliki tampilan sebagai berikut:
width:960px; (lebar header)
height:150px; (tinggi header)
background:#191919; warna latar header hitam dengan kode warna #191919
Sekarang bagaimana cara mengganti dengan gambar?
Pertama : Siapkan terlebih dahulu gambar yang akan digunakan, gambar harus berukuran sama dengan besar header yaitu 960px (pixel) X 150px (pixel) agar hasilnya rapi dan sesuai, kamu bisa membuat dengan photoshop, photoscape atau editor gambar lainnya.
Kedua : uploadlah gambar tersebut di blogger atau di image hosting lainnya / baca (cara upload gambar) dan ambilah URL gambar tersebut.
Ketiga : Perhatikan kode dibawah ini, kode yang harus kamu rubah :
#header-wrapper {Dan rubah kode warna biru background:#191919;
width:960px;
height:150px;
background:#191919; /* <--- ini kode yang dirubah */
}
Menjadi :
background:#191919 url(URL-GAMBAR-DISINI) top center no-repeat;
}
Maka contoh lengkapnya jadi seperti ini :
Rubah https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYggNH410JKxdhJI75YldBRb78XYW1f9aneX8IkNX4zgSK_nzm_ZAk11vaoHbKNSHAROHxafs7aZQeiKm0YQ-9otOOJYMntecASH7IwyqVhZx1fhbZicuxD8V0itJ-sMoRAL8PoJN7Lhqp/s1600/header2.jpg dengan URL gambar yang telah dibuat
#header-wrapper {
width:960px;
height:150px;
background:#191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYggNH410JKxdhJI75YldBRb78XYW1f9aneX8IkNX4zgSK_nzm_ZAk11vaoHbKNSHAROHxafs7aZQeiKm0YQ-9otOOJYMntecASH7IwyqVhZx1fhbZicuxD8V0itJ-sMoRAL8PoJN7Lhqp/s1600/header2.jpg) top center no-repeat;
}
Simpan template dan lihat perubahannya.
Jika tidak mau repot membuat gambar gunakan gambar dibawah ini yang sudah saya persiapkan untuk template tersebut.
URL Gambar 1 : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyrOk9bN6fojrBBf6w9OyrxOxpT4YrhicGBOortFnXKiMNbsnUXfpexwZXHDboyFRtqby_UPS3ih98wUUY2fcDUN7XWodkVuRo193A8R9-xivoPjhQTmJSD37CvPh8Y9pCAoiZzN_OcY2P/s1600/header1.jpg
URL Gambar 2 : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYggNH410JKxdhJI75YldBRb78XYW1f9aneX8IkNX4zgSK_nzm_ZAk11vaoHbKNSHAROHxafs7aZQeiKm0YQ-9otOOJYMntecASH7IwyqVhZx1fhbZicuxD8V0itJ-sMoRAL8PoJN7Lhqp/s1600/header2.jpg
URL Gambar 3 : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOPjaBlPsJilZSrIf6tLqs2cc1SGJVHwDQOyglrNREIcPxtbDbHn966xkrzw86N4zF2tCNK3x8WaC_d6wSqAW7M4AOe9JHG_T00H5G0L8LQo-nn3KSFfp0OVqjzICXuTWHJOeXFjaMfTwc/s1600/header3.jpg
URL Gambar 4 : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcVCjVysXxoKvBSAR6ZdVLkbCMZvd4u-Jyf4dVcmrXcDhmgJl168zqdWvyVEqaKJBLKNoWmmg3Mh1x_NMAz1KJHBHSr9z5lk-pVMMXkoKG-tqKiT5kUwe9DjtVCuGg7Y5cy2UtEbVSHFFG/s1600/header4.jpg
URL Gambar 5 : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrdC4Ef9BpP06Z6pQw7thn0d5ZPvhYx6zjUG3FUi30PpDnN1ZxMI2DCAvAdnR4Qqi5j5OWmtSC2ic563J4ZjV7O6_YZShwx55dLgISe4e-QmyDupBOzCAlQxC7Wj0MshSOaYPks94GJqgs/s1600/header5.jpg