Cara Mengganti Gambar di Header

Tweet

Sebelum mengganti gambar di header ada satu hal yang harus sobat perhatikan.
1. Ketahui dulu berapa ukuran lebar header blog kita. Caranya masuk kedalam Edit HTML

Lalu cari kode dalam tag Css seperti ini

#header-wrapper {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(http://3.bp.blogspot.com/-vygW347tmzM/TfkBpFjfUuI/AAAAAAAAATc/nCXMtImFlo4/s1600/ll.gif) repeat-x scroll left bottom;
height:119px;
width:900px;

Setiap template pasti berbeda-beda sobat cukup cari kata #header-wrapper { lebih mudahnya tekan ctrl F lalu tulis kata #header-wrapper {, lalu lihat hight dan widhtnya.

2. Setelah mendapatkan ukuran lebar header, maka cari gambar atau buatlah gambar untuk header kita sesuai ukuran tersebut atau kurang dari ukuran tersebut.
3. jika sobat mempunyai phothoshop mungkin akan mundah untuk menyesuaikan ukuran gambarnya
Sebelumnya simpan dulu gambar untuk header ke web tempat penyedia penyimpanan gambar misalkan di photobucket.com atau googlepages.com
Setelah gambar sudah ada atau sudah sobat siapkan saatnya kita menuju ke tkp.

1. Masuk ke Edit HTML

kemudian cari #header-wrapper, contoh seperti ini

#header-wrapper {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(http://3.bp.blogspot.com/-vygW347tmzM/TfkBpFjfUuI/AAAAAAAAATc/nCXMtImFlo4/s1600/ll.gif ) repeat-x scroll left bottom;
height:119px;
width:900px;

2. Setelah ketemu tambahkan kode dan alamat url gambar yang telah berwarna biru.

Setelah itu langkah selanjutnya apakah judul dan deskripsi ( judul dan keterangan ) blog ingin di ikut sertakan atau tidak ? biasanya judul dan deskripsi ini mengganggu, jika ingin di sembunyikan tambahkan saja kode ini display:none; di #header h1 { Hasilnya akan terlihat seperti ini

#header h1 {
display:none;
font-family:'Forte', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif;
font-size:40px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
letter-spacing:-1px;
line-height:normal;
margin:5px 5px 0;
padding:15px 20px 3px 0;
text-transform:none;
}

tambahkan juga di properti dan valuenya

3. Begitu juga dengan descripsi. Cari #header .description tambahkan lagi kode seperti ini display:none;. Maka hasilnya akan seperti ini

#header .description {
display:none;
color:#cc0000;
font-family:Cooper Black;
font-size:15px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
letter-spacing:0;
line-height:normal;
margin:0 5px 5px;
max-width:700px;
padding:0 20px 15px 0;
text-transform:none;
}

4. Simpan template, dan lihat hasilnya...