Find What You Need

29 Mar 2011

Bagaimana Membuat Background Blog Ada Dua Warna

Tag : 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..BELAJAR BERSAMA




***** Semoga Bermanfaat *****

Untuk mendapatkan informasi dan postingan terbaru dari blog ini, silahkan ketikkan email anda di form berlangganan. Gratiiiis...

Berlangganan Lewat RSS

6 komentar:

Sarah ferdina Pada 11 April 2011 pukul 13.33 mengatakan...

sarahferdina.blogspot.com link back yaa..:D

Albaniyu Pada 20 April 2011 pukul 16.17 mengatakan...

baik2 none..:D

Mull Pada 15 Januari 2012 pukul 13.33 mengatakan...

klo tanpa gambar bisa tidak backgroudnya dua warna

Mull Pada 15 Januari 2012 pukul 13.39 mengatakan...

klo tanpa gambar bisa tidak backgroudnya dua warna

Mull Pada 15 Januari 2012 pukul 13.45 mengatakan...

klo tanpa gambar bisa tidak backgroudnya dua warna

Surya netcenter Pada 21 Oktober 2013 pukul 15.54 mengatakan...

nice share gan,, (y)

Posting Komentar

Biar tambah semangat nulis blognya,ketikkan saran dan komentar. Walaupun singkat tetapi saran dan komentar yang anda berikan sangat berarti buat blog ini.

Ketikkan Karakter Jika Ingin Memasang Emoticon.
:)):)];));;):D;):p:((:):(:X=((:-o:-/:-*:|8-}~x(:-tb-(:-Lx(=))

Artikel Yang Lainnya

 

My Best Friend

Mengenai Saya

Foto saya
Sebagai tempat belajar dan menyimpan arsip jika saya membutuhkannya suatu waktu, dan semoga menjadi ilmu yg Bermanfaat bagi Orang yang membacanya .

Visitor

free counters

Belajar Bersama Copyright © 2009 Template Wanaking Di Desain Ulang Oleh Albaniyu | Blogger Template