Mengganti Background Blog Dengan Gambar

Browse » Home » Background Blog » Gambar » Template » Tutorial Blogspot » Mengganti Background Blog Dengan Gambar

Sebuah blog yang cantik dan enak dilihat tentu akan sangat membantu dalam meningkatkan traffic blog kita, karena saya sendiri lebih tertarik mengunjungi sebuah blog yang warnanya cerah dan enak dilihat, daripada blog yang warnanya gelap dan bentuknya tidak karuan alias acak kadut. Walaupun postingannya menarik tetapi membuat sakit mata, lebih baik saya pelototi blog saya selama berjam - jam.

Saya akan berbagi tips sedikit yang saya tahu tentang merubah warna background blog atau mengganti background dengan gambar yang sudah sobat upload ke tempat penyimpanan online, misalnya di Google Sites atau Photobucket.

Berikut langkah - langkahnya :

Login ke Blogger.
Klik Tata Letak --> Edit HTML.
Kemudian cari kode yang mirip seperti ini :

body { background: #FFFFFF;
margin:0; color:#000000;
font:12px trebuchet ms;
text-align: center }

Atau jika bingung silahkan klik Ctrl + F kemudian ketikkan body {, biasanya letaknya diatas.
Untuk mengganti background dengan warna lain tinggal mengganti kode #FFFFFF dengan kode lain, untuk kode warna bisa dilihat disini. Contoh saya mengganti background dengan warna abu - abu, hasilnya akan menjadi seperti berikut :
body { background: #D8D8D8;
margin:0; color:#000000;
font:12px trebuchet ms;
text-align: justify }
Untuk mengganti background dengan image atau gambar, misalnya gambar yang sudah saya simpan di blogger, kode url-nya seperti ini :

http://lh4.ggpht.com/_7Y9pl24WpQY/StGOm72nY7I/AAAAAAAAB4c/mWg4brKUK4Q/body_thumb%5B4%5D.jpg?imgmax=800
Sehingga hasilnya menjadi seperti berikut ini :
body { background:#FFFFFF url(http://lh4.ggpht.com/_7Y9pl24WpQY/StGOm72nY7I/AAAAAAAAB4c/mWg4brKUK4Q/body_thumb%5B4%5D.jpg?imgmax=800) repeat-x;
margin:0; color:#000000; font:12px trebuchet ms;
text-align: justify}
Jika sudah selesai kemudian Simpan Template sobat.

Untuk gambar yang continuous sobat tambahkan repeat-x setelah kode url gambar. Lebih jelasnya sobat bisa baca postingan saya tentang cara mengganti backgroud blog dengan gradient image disini.

Selamat mencoba !

Oleh : Dody FariaL Pada hari Kamis, Juni 18, 2009

Berlangganan artikel terbaru via Email

Artikel Lainnya :

65 comments

Dody FariaL

21 Juni 2009 pukul 23.34

udah saya link balik..silahkan di cek, thanks

elmubarok

11 Agustus 2009 pukul 02.55

makaih brow tips "Mengganti Background Blog Dengan Gambar" cukup bagus,, n brhsl d praktekin d blog aku.....

Dody FariaL

11 Agustus 2009 pukul 12.12

sama2 mas elmubarok..saya juga br belajar kok

Rattlenetwork

28 Agustus 2009 pukul 01.50

Thanks infonya...sip nih..

indra

8 November 2009 pukul 12.54

setuju mas,saya juga paling ga suka liat blog2 yg gelap,ga ada patromak lagi..emang didalem goa.hehehe...

Purwadianto

12 November 2009 pukul 09.37

Bang Dody...gemana nech...aku buat tempalate di blog aku tapi hasilnya ngga maksimal? Berantakan!!

Alkar AnnaZ

3 Februari 2010 pukul 19.29

Wah keren sekali triknya,! makasih banyak....

FASHION MURAH BANDUNG

21 Februari 2010 pukul 22.41

boz, gmna ne kode body { background: #FFFFFF;
margin:0; color:#000000;
font:12px trebuchet ms;
text-align: center } tidak ada

Dody FariaL

22 Februari 2010 pukul 00.01

@ Evson : cari yg mirip aja karena setiap template beda2, cari aja tag body { trus lihat kode warnanya

Catherine Stefanny

7 Juni 2010 pukul 05.07

Aku tetep nda bisa mas :(
cari kode nya dimana

tuker link blogger

1 Juli 2010 pukul 23.16

ini yang aku cari... terima kasih,gan...
tak cobain nih!

ajurnaads

29 Juli 2010 pukul 21.47

oalah. ternyata letaknya disitu toh ....

kancutlizersolo

12 Agustus 2010 pukul 03.54

oke teman saiya coba dulu.
bismilah mudah2an berhasil..

Anonim

28 Agustus 2010 pukul 22.08

mskh yachhh
^_^

Extra Tutorial Blog .

16 September 2010 pukul 05.42

ok lah mantav ,ijin sedot gan :))

Feby

27 September 2010 pukul 13.12

Bos kalo background blog atau web tuh lbar sama tingginya brp x brp yah? trus upload slain di photobucket th dmn aj yh?
knjungi blog gw yh: http://febyculun.blogspot.com/

Dody FariaL

27 September 2010 pukul 16.38

@Feby : / tinggi tdk ada batasnya, u/ lebar bs sobat lihat blog saya menggunakan lebar 980px. Upload gambar bs di google sites

Robbul Wali

11 November 2010 pukul 15.55

saya sudah membuat banner melalui "Banner 123" (Creator Banner) namun saat saya masukkan ke blog saya kok tidak dapat muncul...
Bagaimana ya tolong bagi informasinya dong ?

Unknown

24 November 2010 pukul 23.56

kalo cara yang lebih simpelnya ada ga gan??
oia,,salam kenal gan.. ane masih newbie nih.. minta linkback ya.. hehehe,, trima ksih sblumnya..
http://jendelagitar.blogspot.com/

Anonim

18 Desember 2010 pukul 22.28

saya akan coba mas...
semoga berhasil ya

Kristiana

7 Januari 2011 pukul 21.21

mo tanya mas,,,bisa gak klo backgroundnya pke gambar format gif biar bsa gerak?

okand

13 Februari 2011 pukul 01.49

kk kayk mna kalo pengunjung mau comment...
blog w gk bisa melulu

BIK Pemula

6 Maret 2011 pukul 09.52

Makasih artikelnya

PEMUTIH WAJAH

14 Maret 2011 pukul 14.41

MASIH BINGUNG...???...COBANYA....

Clara Lana

18 Maret 2011 pukul 13.01

Mau coba ahh mengganti warna background blog aku.. makasih infox...

EL-ROZI

20 April 2011 pukul 12.49

tak coba ganti background dengan image, koq gak bisa ya, padahal udah takmasukin url nya dari photobucket, knp ya koq masih tetap

Lima Sembada

24 April 2011 pukul 23.11

aku coba yahhh.....trims

antho

3 Mei 2011 pukul 19.01

halosobat semua
tampbahandarisya si klog di ganti dengan gambar agaknya mempengaruhi dikit loadingnya.akhirnya aku tau juga semua berka blog miscah yang bermurah hati untuk senan tiasa memasang tips terbaiknya tenks buat miscah.blogspot.commoga makin sukses ya

Horier

16 Mei 2011 pukul 01.19

tanya nih sob, klo misalnya aku pingin ganti body background-nya dengan gambar tp bisa gag strecth..biasanya kan klo cuma 800px ya jadinya segitu nah aku pingin gambar yg 800px td otomatis penuh di background

Dody FariaL

16 Mei 2011 pukul 07.08

@Horier : ditambahkan "repeat-x" contohnya seperti ini :

body {
width:980px;
background:#000 url(http://lh4.ggpht.com/_7Y9pl24WpQY/Ss3-5FwOlwI/AAAAAAAAB20/t0KDHUMkcRA/bg2_thumb%5B1%5D.jpg) repeat-x;
margin:0 auto;
padding:0;
font:12px verdana,arial,trebuchet ms;
text-align:left;
color:#333
}