Minggu, 10 April 2011

Merubah Dan Menambah Warna Background Menjadi 2 Bagian Warna

Mungkin dari kita sudah pada tahu bagaimana cara merubah warna dari sebuah background blog baik menggunakan kode Hex warna maupun di pasangi image. Tetapi sekarang bagaimana caranya supaya background blog kita mempunyai background warna yang berbeda, seperti yang bisa pembaca lihat seperti pada blog saya ini atau seperti contoh dibawah .

Coba perhatikan gambar diatas, terlihatkan backgroundnya terdiri dari dua warna, bagian atas berwarna hijau sedangkan yang bawah orange .
Untuk membuat background menjadi 2 warna seperti diatas,caranya sangat mudah, kita tinggal menambahkan url image yang sebelumnya telah kita buat ke dalam kode CSS template pada bagian Body.

Supaya lebih jelas lebih baik kita langsung praktekan saja, tetapi sebelumnya kita buat dulu warna background untuk bagian atasnya dulu, karena bagian inilah nantinya yang akan kita tempatkan atau simpan di alamat Hosting URL penyimpanan gambar kita, supaya nantinya bisa di panggil menggunakan kode CSS.

Buatlah gambar dengan ukuran :

Panjang : 350 px : Sesuaikan saja ukurannya nanti sesuai selera anda
Lebar : 5 px

Setelah selesai silahkan upload ke URL tempat anda menyimpan gambar, dan catat alamat URL gambar yang tadi telah di upload.
Sekarang kita masuk atau Sigin Ke Blogger -> Rancangan -> Edit HTML

Temukan Kode CSS ini :


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

Perlu di ketahui kode CSS ini adalah kode Template Minima Tapi pada dasarnya kode CSS body untuk template yang lainnya juga tidak ada perbedaan. Sekarang coba perhatikan kode yang saya warnai kuning, nah cuma pada bagian inilah kita akan menambahkan kode untuk membuat background jadi dua warna.

Ganti kode diatas tadi dengan kode ini :

body {
background:#ffffff url(http:// Alamat URL Gambar Anda.jpg) repeat-x left top;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}


Jangan lupa setelah beres kita save dulu. Coba lihat hasilnya..