Mengganti Background Blog Dengan CSS

Posted By anasku
Background atau latar belakang pada blog adalah bagian yang paling dasar pada blog, banyak template blog yang sama yang banyak dipakai, maka untuk memberi ciri khas pada blog Anda hal yang paling dasar dan yang paling mudah adalah mengganti warna background pada blog Anda atau dengan tambahan gambar pada background blog Anda.
Kali ini Saya akan menulis tutorial singkat blogspot tentang mengganti background dengan CSS, Mau tau caranya?
perhatikan dibawah ini.

Langkah pertama adalah masuk menu Layout (tata letak) kemudian masuk menu Edit HTML

Lalu cari CSS dari body seperti dibawah ini

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

Kalau mau mencari CSS diatas perhatikan code yang berwarna hijau saja.

perhatikan Code CSS background diatas
$bgcolor adalah variabel definisi, jika Anda ingin menggantinya bisa dengan code warna misalnya ganti dengan warna putih code warnanya adalah : #FFFFFF atau warna hitam #000000. Atau warna yang lain bisa dilihat disini.


Mengganti background blog dengan gambar :

untuk membuat background gambar kita perlu sebuah gambar yang sudah diupload di hosting. Atau Anda bisa mencari di google image search dan copy URL gambarnya.
Kalu sudah tersedia gambar yang mau dijadikan background perhatikan dibawah ini.

background:#FFFFFF url(URL_GAMBAR) ;

URL_GAMBAR ini bisa Anda ganti dengan URL gambar yang Anda pilih misalnya gambar :

back

URLnya :
http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg

Mengantur Background Gambar

background:#FFFFFF url(URL_GAMBAR) no-repeat top left;

no-repeat : berarti gambar didak akan mengulang, Bisa Anda ganti dengan

repeat : Mengulang-ulang gambar
repeat-x : mengulang secara horizontal
repeat-y : Mengulang secara vertikal

top left : Adalah posisi background bisa anda ganti misalnya bottom right

sedikit tambahan jika Anda mau mencari koleksi background

http://www.patterncooler.com/
http://www.bgpatterns.com/
http://patterns.ava7.com/

Nah sekian tutorial mengganti background blog, sedikit semoga membantu Anda.
Artikel Terkait untuk "Mengganti Background Blog Dengan CSS"

27 comments:

Anonymous said...

wih keren bro tipnys.. tp lum ngerti bnr ttg ini..hehe

ym km apa kang jaloe ?

Anonymous said...

keren mas postnya.. uda ngerti ttg css ya..
mantapss

blaze5.com

Subagya said...

wah update juga nih si bro anas.. ada yang bertanya nigh mengenai hal ini saya kash link k sini aja ah...

Unknown said...

mantab nui mas tipsnya..

Anonymous said...

terus terang ini ngebantu banget,tapi masih kurang lengkap aja mas...!!!!apalagi buat template baru...agak ribet...maksudnya

Zebrakarta Jogja said...

sedikit banyak aku bisa blajar, thanks ya mas..

Anonymous said...

tutorialnya mantab juragan, saiia pelajari dulu. thx

Anonymous said...

langsung ke TKP pattern...

- s L i K e R s - said...

Keren bos, dah lama gak mampir kesini, huehue... Gmn kabarnya mas anas?

Anonymous said...

Nice site you have here..
Thanks for the info..I'll use this a lot

Anonymous said...

siiip

pasti lain waktu saya coba

thx ya

Anonymous said...

pake css fs/multiply bs gag?
hehehe

A. Fakhri Wibawa said...

Thank's infona.
dah sy cb2 neh.
wlu blm berhasil & lom fhm2 bnr,
truz sy cb neh.
Sambil belajar lbh dalem lg lah.

Mantep mas.
TQ.

Anonymous said...

Q blum ngrti bgt nich gmna cara na mengubah background na...keterngan na da yg kurang. Tp d coba dlu dech..

Anasku said...

@syifa
keterangan lebih jelasnya untuk CSS background baca disini

Bram`s " Nanang Suatmaji " Indrajied said...

nggak ngeffect mas tutornya

Anonymous said...

perlu juga nih tips dicoba ...thanks om.

ardi33 said...

huuh..berguna sekaliii.....

drs.h.m.kholil said...

Terima kasih, amat banyak saya dapatkan dari tutorial anda. sehingga blog saya semakin bagus kelihatan lebih profesional.

Kenali dan Kunjungi Objek Wisata di Pandeglang said...

Waww..makasih kang, akhirnya nemu juga nih tutorial..:)

harry seenthing said...

wakh makin keren nih mas, tapi sayang kok jarang main kemana2 yah...hhmmmmm

Unknown said...

thanks y . . .
oya warna backgraund coklat dibawah gmana cara buat nya . .
thanks b4 . . .

John O Width said...

mantap bro, langsung praktek nih...

aaadesd said...

terimakasih infonya gan,salam sukses n follow back gan,tanks,,

Anonymous said...

coba ach.....

Rofiq said...

mantaappp

mampir juga ke sini gan
http://zofiq.blogspot.com/

obat kutil kelamin ampuh said...

di coba dulu...
trimakasih...

Post a Comment

 

Site Info

Add to Technorati Favorites
Visitor Online
Check PageRank

Recent Comments


On Jan 28 Activator Software commented on membuat screen capturecontoh gambar
Mozilla Firefox Crack is a quick, full-characteristic web browser that is easy. It’s abundance of...(more)

On Dec 02 Anonymous commented on mengganti haloscan ke comment blogger_16
شركة مكافحة الفئران بالاحساء WN63TpptlC

On Nov 18 Anonymous commented on membuat screen capturecontoh gambar
شركة تنظيف بيوت بجازان gJ1f0Rm2Bl

On Feb 21 Adam Demos commented on membuat screen capturecontoh gambar
Boosting Your Online Success, One Click at a Time.PDFMachine Ultimate Crack

On Nov 22 seoboss commented on membuat screen capturecontoh gambar
OfficeSuite Premium 13 Crack With Keygen Key Free Download Full Version with Keygen Key is a very...(more)

On Aug 29 mustafa commented on mengganti haloscan ke comment blogger_16
https://saglamproxy.commetin2 proxyproxy satın alknight online proxymobil proxy satın al22B

On Aug 05 Ferit commented on search engine dengan background dan
yurtdışı kargoresimli magnetinstagram takipçi satın alyurtdışı kargosms onaydijital...(more)

On Aug 04 yusuf commented on membuat screen capturecontoh gambar
niğdeurfaartvinbitlisısparta3FUR

On Jul 30 Özer commented on membuat screen capturecontoh gambar
yurtdışı kargoresimli magnetinstagram takipçi satın alyurtdışı kargosms onaydijital...(more)

On Jul 29 baran commented on membuat screen capturecontoh gambar
fethiyekağıthanekuşadasımaltepeşirinevlerXD1JM3

Tutorial Jitu - Blog Info, Gadget-Widget, Blogspot tutorial, blog hack, free template, SEO And Blog tips : Admin By Luqman Khoirul Anas