Menambah Background-Gambar pd Blog

Feb 4, 2008

Untuk menambah background-image ( bergambar ) pada blog.ada dua cara yang bisa kita gunakan. Cara pertama Bisa dengan satu gambar yang ukuran-nya sesuai dgn halaman blog, atau cara kedua mengunakan gambar kecil yang di repeat (di ulang-ulang) hingga menyesuaikan dengan halaman blog.

Cara yang Pertama :

1. Siapkan gambar ukuran 1024 x 768 px.( untuk di tampilkan pd monitor dengan Resolution 1024 x 768 px atau di bawahnya ) atau gambar ukuran 800 x 600 px ( untuk di tampilkan pada monitor resolution 800X600 px ).

2. Setelah itu Upload gambar atau simpan pada Image hosting seperti Photobucket, Googlepages atau image hosting yang biasa kita gunakan ( untuk yg belum tahu cara menyimpan gambar pd image hosting klik di sini )

3. Sekarang buka blog kita pada halaman Template -> buka tab Edit Html. kemudian cari kode/tag css Body {... } misalkan kodenya seperti ini.

body {
font: normal 85% / 100% "Trebuchet MS",Tahoma,Arial;
color: #000;
background: #FFFFFF;
}
4. Kemudian tambahkan saja properti  ini :

background-image: url (http://alamat gambar kamu.com/image.jpg);

Dan hasil pengabungannya seperti ini.

body {
font: normal 85% / 100% "Trebuchet MS",Tahoma,Arial;
color: #000;
background: #FFFFFF;
background-image: url (http://alamat gambar kamu.com/image.jpg);
}

Cara Yang Kedua

Mengunakan nilai repeat ( di ulang-ulang ). yang terbagi ke dalam tiga penulisan :

1. Me-repeat image baik secara vertikal dan horizontal.

Contoh ilustrasi gambar ...+/-

ss143 

ukuran 200 x 200 px

Penambahan properti-nya seperti ini.

background-image: url (http://alamat gambar kamu.com/image.jpg);
background-repeat:repeat;
hasil pengunaanya seperti background blog ini, atau bisa di lihat juga di sini.


2. Me-repeat gambar secara vertikal saja.

Contoh ilustrasi gambar ...+/-

cloth115

ukuran 1024 x 99 px

Penambahan properti-nya sperti ini.

background-image: url (http://alamat gambar kamu.com/image.jpg);
background-repeat:repeat-y;
hasilnya bisa di lihat di sini.


3. Me-repeat gambar secara horizontal saja.

Contoh ukuran gambar ...+/-

wood068

ukuran 198 x 768 px

Penambahan properti-nya seperti ini.

background-image: url (http://alamat gambar kamu.com/image.jpg);
background-repeat:repeat-x;
hasilnya bisa di lihat di sini.

Gambar yang bisa di gunakan untuk background-image ini : Jpg, Gif, Png.

 

Beberapa link penyedia background-image :

1.grsites.com
2.customize.org
3.veredgf.fredfarm.com
4.loreleiweb.com
5.designpacks.com
6.kollermedia.at
7.backgroundcity.com

 

Ikuti terus update informasi New Blogger di blog ini. Silahkan masukan email anda untuk berlanganan Via Email Subscription atau klik Subscribe Via Rss Feed .Makasih juga atas kunjungannya.

 

Technorati tags: ,

13 comments:

  1. Mas aku minta ijin pinjam bekron ya ya krna aku nyari yang sesuai bloom dapat lleh gak kloo gak leh aku maksa
    aku pinkam yang ini
    http://jaloee.googlepages.com/mid_25.gif

    ReplyDelete
  2. ngga di kasih jg bakalan maksa..heuheuheu..

    pindahin sj alamat gambarnya..

    ReplyDelete
  3. mo nanya nih, kalo mo ngedit atau buat xml templates new blogger pakai software apa..

    ReplyDelete
  4. yg saya tahu samapi sekarang bloem ada sofwarenya. kalau ada layanan free template sebenarnya itu hanya merubah layoutnya melalui kode atau tag Css-nya dan sedikit kode html saja.

    ReplyDelete
  5. mas klo yang dibuat gambar tuh bordernya aja bisa ga ?

    klo bisa tunjukin donk kodenya

    bls di blog aku ya ....
    hehehe

    ReplyDelete
  6. Kang, klo bis kasih gambarnya donk pas ngajarin trik2 d blog. aku kan baru belajar blog jd bingung, coba kalo ada gambarnya pasti lbih cepat nangkapnya

    ReplyDelete
  7. kang boleh ga saya minta bikinin beground / sekalian di pasangkan deh di blog saya please yah...

    ReplyDelete
  8. Mas Tolong gimana caranya menyispkan gambar ditengah artikel...seperti pada artikel mas yang berjudul(Menambah Background-Gambar pd Blog )ini.. soalnya setiap saya buat hanya bisa ditampilkan diatas artikel aja gambarnya... Tolong pencerahanny. Emailku/ymku:riantawwa_007@yahoo.co.id

    ReplyDelete
  9. To Aryha

    alamat email na yg mana mas :)

    ReplyDelete
  10. thx berat bisa belajar nich.....

    ReplyDelete
  11. thx berat bisa belajar nich.....

    ReplyDelete
  12. thx berat bisa belajar nich.....

    ReplyDelete
  13. thx berat bisa belajar nich.....

    ReplyDelete