Jadi bisa

Browse Manual » Wiring » dengan » gambar » header » merubah » Merubah header dengan gambar

---

Merubah header dengan gambar

Dari template yang telah dibuat kemarin header template berwarna hitam tanpa gambar, sekarang bagaimana jika merubah tampilan header dengan gambar,,,,,bagaimana caranya?



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 {

width:960px;

height:150px;

background:#191919; /* <--- ini kode yang dirubah */

}

Dan rubah kode warna biru background:#191919; 



Menjadi :



background:#191919 url(URL-GAMBAR-DISINI) top center no-repeat;

}



Maka contoh lengkapnya jadi seperti ini :

#header-wrapper {

width:960px;

height:150px;

background:#191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCMLDNd2nk4T_Wtse7Y0q48phRNeY22D9eVlRipfkLDz9v1hRAwRP_KteQ0HNgihTIHJM5kw1wj1pjBmg3e86eIZ6nmLqi5t_Ihh_kN-ksz3oqXf7en-mWcc9hOfwLExPUb5JgrEl6ufbT/s1600/header2.jpg) top center no-repeat;

}

Rubah https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCMLDNd2nk4T_Wtse7Y0q48phRNeY22D9eVlRipfkLDz9v1hRAwRP_KteQ0HNgihTIHJM5kw1wj1pjBmg3e86eIZ6nmLqi5t_Ihh_kN-ksz3oqXf7en-mWcc9hOfwLExPUb5JgrEl6ufbT/s1600/header2.jpg dengan URL gambar yang telah dibuat



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/AVvXsEhWDXNM9Hzx05gNmjNzFac4iEi77k83HRPoHtgy5OuSWaXwINvLKqZ8hzH6JFqyYyhN0-qZABe1oj6MCs8b5sc6UD-eHEydVyoEajc4-YN4JTT24tLbq7_zCL5r18j1_fiVTZmmtqRQeDjb/s1600/header1.jpg





URL Gambar 2 : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCMLDNd2nk4T_Wtse7Y0q48phRNeY22D9eVlRipfkLDz9v1hRAwRP_KteQ0HNgihTIHJM5kw1wj1pjBmg3e86eIZ6nmLqi5t_Ihh_kN-ksz3oqXf7en-mWcc9hOfwLExPUb5JgrEl6ufbT/s1600/header2.jpg





URL Gambar 3 : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy5o_MfYIN8kOQobIDnU5pScjzr-dkasPUWlPTVYE3XE5zO9nHL9mgF5M_QwV3kwNxm72fiFE_McAO5ybJqJfDdA0O1Hwbhjn1tzTVAE84Rfey2z2nVI1V-KXBq2G4xAv97oDEQoUKzC7c/s1600/header3.jpg





URL Gambar 4 : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuoF3mF9QAijFyHuh2T6oLEE8nmIeWEEmehe8I9adTE716eg4NIF330lGc3QbwpfAfZbYvXF0GYbzKyT8gW33R115z1Kx5CH-t3pWQIeemG8yAqIFvQ7ZAMflsnt2UOswCqj1ftAHDDQQk/s1600/header4.jpg





URL Gambar 5 : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAKc_zuexSyuikE9_ug4ekEqwI5TsHwTucEUgaGqEN7e801oP5sFv2omWpargEW4QPTEq7jNXNrEOd56GGQms0s2PechJHdhJrKlB8cC4BTVCIwE6MxkLfZoVG0mJFEPYxC8R6GBbys5Ju/s1600/header5.jpg