Memasang Gambar utk Header bag 2

Cara Ketiga

( lanjutan dari postingan sebelumnya )

Langkah Pertama kita cari atau buat gambar dulu yang lebarnya 1024 px dan tingginya 150 px atau 200 px sudah cukup bagus. setelah beres kita upload gambar-nya ke web tempat penyedia penyimpanan gambar. (baca cara menyimpan gambar di photobucket dan googlepages di sini.)

Langkah Kedua buka halaman TEMPLATE kita kemudian tekan link tulisan EDIT HTML.

Setelah itu cari tag Body di kode Css . misalkan kalau di Template Minima seperti ini.

body { background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Kalau sudah ketemu, tambahkan di properti background-nya alamat url gambar yang telah kita persiapkan . contoh-nya jadi seperti ini.

body { background:url(http://jaloee.googlepages.com/gam-16.jpg) no-repeat left top $bgcolor ;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

ganti alamat url ( http://jaloee.googlepages.com/...) dengan alamat url gambar kamyu.
Kalau merasa main-wapper dan sidebarnya kurang ke bawah kita rubah saja nilai padding-bottom dari tag # header .description dengan nilai yang lebih tinggi. contoh-nya seperti ini ( masih dalam template minima ).

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;

nah kita lihat angka 15px yang di tulis tebal ganti misalnya dengan 30px atau lebih.alternatif lain bisa juga dari margin-bottom tag #header-wrapper-nya.

BACKGROUND REPEAT 

Sedang ini cara yang ke empat, sebenarnya sama dengan model yang di atas. yang membedakan jika kode di atas mengunakan nilai no-repeat sedang cara kedua ganbar backgroundnya mengunakan nilai repeat ( di ulang ). artinya me-repeat atau memperbesar ukuran gambar yang kecil agar menyesuaikan dengan ukuran halaman web. (baca juga membuat gambar background repeat di sini. )
contohnya  gambar kecil seperti di bawah ini.

kemudian di bagian properti background kode css -nya tambahkan alamat url gambar dan nilai repeat-x. seperti ini.

body {
background: $bgcolor url(alamat url gambar) 0 0 repeat-x ;
font: 80%/150% "Trebuchet MS", Tahoma, Arial;
color: $textocolor;

  margin: 0px;
padding: 0px;
}

mengunakan nilai repeat-x ( mengulang secara horizontal ) kemudian  melalui Template ->  Eleman Halaman di widget header-nya tambahkan sebuah gambar misalkan berukuran 280px X 56 px.seperti gambar di bawah .

Maka hasil akhirnya akan nampak seperti blog ini. demo.

yaaa..sedikit lumayanlah untuk kalangan non-profesioanal seperti inyong  ini.

Technorati tags: Belajar blogs, new blogger

Baca Juga

1. Background Image Gradient.
2. Menyimpan Gambar Utk Internet.
3. Membuat Header Gold