BloonOnline GoTemplatez VersiEdan
Facebook Twitter You Tube Friendfeed
Blog Seo Intermezo

Menambah Background-Gambar pd Blog

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: ,
Page views this post: reader

11 komentar:

Fuel Freedom International said...

bos gmn se cara'y menampilkan background..gw udah masukin codenya,,tapi ko g bisa yh????jelasin dunk...

and 1 lg cara masukin sound ke blog gimana caranya??

Jaloee said...

kalau di copas tidak bisa. coba di tulis manual perhatikan juga space dan titik komanya ( ; ).

kalau manual ngga bisa coba di copas dan ganti titik komanya secara manual..

ttg bg sound.. entar saya post..

riyu pratomo said...

thank`s for any news all it`s can help me for make template

cakrukmania said...

mas jaloee,akoe coba kok ga bisa ya..?kode like this

body {
font: normal 85% / 100% "Trebuchet MS",Tahoma,Arial;
color: $footrTextcolor;
background-image: url (http://i376.photobucket.com/albums/oo210/choki_01/lo.png);
background-repeat:repeat;
}

tolong bantuin kalo salah..trims

Jaloee said...

coba di copas saja kode di atas.. ngepek ngga ??

background: transaprent url(http://i376.photobucket.com/albums/oo210/choki_01/lo.png);
}

cakrukmania said...

background: transaprent url(http://i376.photobucket.com/albums/oo210/choki_01/lo.png);
}
akoe dah coba..
tapi mas tetep aja tuh ga nongol backgroundnya...ada apa gerangan yang salah ya?tolong ya..makasih

cakrukmania said...

mas jaloee,akhirnya akoe berhasil.akoe kemaren liat buku"tak tik blog" karya mbak angel&olie..akoe coba kodenya.
body {
margin:30x 0;
padding:0;
background: url(http://i376.photobucket.com/albums/oo210/choki_01/lo.png) repeat;
font-size: small;
color:$textColor;
}
ternyata berhasil..alhamdulillah..jadi senang..mas jaloee tetep berkarya, akoe ngekor he he...

Jaloee said...

@ chokichim

iye pasti berhasil donk.. biasanya terjadi error itu pada syntax background: url(gam) repeat; yg spacenya terlalu jauh

Anonymous said...

aku coba yach cara diataz...kali aj bloq ku jadi lebih qeren

Ecooturism Network Information Center Aceh said...

coba cara yg gini aja: copas alamat image nya di depan body {
background:#fff url(copas alamat image nya disini);
cuma masalah nya gambar gak bisa tampil penuh alias repeat walua resolusi 3000 ketasa,
da yg tau cara ngakalin nya gak?

anneYanne said...

omoooo .. aku gak bisa" sampe BT sekarang .. *makLum blogger baru ..

Post a Comment

" Apapun Yang Dapat Anda Lakukan, Atau Ingin Anda Lakukan Mulailah

Keberanian Memiliki Kecerdasan, Kekuatan Dan Keajaiban Di Dalam-nya"

Makacih Atas Komentar-Nya

 

Copyright 2009. Home | Serba Serbi Google | XHTML | CSS Design by Catalog-Tutorial