Jadi bisa

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

Tampak terdapat void di atas ruang keluarga milik pelawak Deny Chandra. Pada tengah voiddigantungkan lampu hias putih. Sementara itu railing tangga diberi aksen dan pijakan dari kayu kamper yang dipelitur dof. Bagian bawah tangga dimanfaatkan untuk tempat meletakkan kabinet perangkat audio-visual.

Salah satu aksesori yang menarik terdapat pada dinding tangga. Tampak kisi-kisi kayu yang dijadikan aksen. Kisi-kisi terbuat dari susunan dua batang kayu berukuran 60cm x 7cm x 5cm dan 25 batang kayu berukuran 50cm x 1,5cm x 1,5cm. Duapuluhlima batang kayu ini disusun melintang di atas dua batang kayu yang disusun sejajar. Aksesori ini dibuat sendiri dengan biaya yang murah meriah lho!

idea.co.id