Cara Mengganti Gambar Background Blog di Blogger/Blogspot

Memperindah blog ternyata juga merupakan hal yang menyenangkan, karena kustomisasi blog memang sangat diperlukan agar blog tampak lebih personal dan unik. Nah salah satu cara membuat blog tampak beda dengan yang lain adalah dengan mengubah background blog. Untuk mengganti gambar background blog seperti yang diinginkan, berikut langkah-langkahnya:

(Sebelum anda mengganti warna/gambar background dengan gambar bakcground baru, pastkan  telah menemukan/memiliki gambar background dan menghosting-nya sendiri.

1. Masuk ke dashboard > Template
2. Klik Edit HTML
3. Arahkan dan klik kursor di dalam area template editor, lalu tekan Ctrl+F
4. Cari kode CSS ini: body{ dengan cara memasukkannya ke dalam kotak pencarian dan tekan enter.
    Atau bisa juga dengan mencari kode selengkapnya/menambahkan kode setelah body { seperti berikut:
   body{background-image: url(alamat url gambar anda);
5. Ganti alamat url gambar anda dengan alamat gambar background yang telah anda host.
6. Save template

Yang perlu diperhatikan adalah ukuran gambar anda, usahakan untuk tidak menggunakan gambar dengan byte yang besar, usahakan di  bawah 50 Kb, agar tidak membuat loading berat dan lama.
Gambar memiliki ukuran pixel yang berbeda-beda. Pastikan hasil gambar background blog anda penuh dari kiri ke kanan dan dari atas ke bawah. Untuk membuat gambar background penuh diperlukan pengulangan. Gunakan tag repeat (mengulang) ke kanan/samping: repeat-x, dan ke bawah: repeat-y. Berikut contoh untuk pengulangan ke kanan/samping::

body{background:url(http://2.bp.blogspot.com/_wnULV7UHiXY/TSOhgPOpqXI/AAAAAAAAAH8/dC7uwZp1HA0/s1600/t28_blue_background.jpg
);background-position:top left;background-repeat: repeat-x; ....dst}

agar gambar juga mengisi hingga ke bawah (hingga footer halaman), tambahkan repeat-y tepat disamping repeat-x. Contoh:
body{background:url(http://2.bp.blogspot.com/_wnULV7UHiXY/TSOhgPOpqXI/AAAAAAAAAH8/dC7uwZp1HA0/s1600/t28_blue_background.jpg
);background-position:top left;background-repeat: repeat-x repeat-y; ....dst}

Jika anda tidak ingin gambar anda berulang baik ke kiri atau ke bawah, cukup gunakan kode no-repeat. Contoh:
body{background:url(http://2.bp.blogspot.com/_wnULV7UHiXY/TSOhgPOpqXI/AAAAAAAAAH8/dC7uwZp1HA0/s1600/t28_blue_background.jpg
);background-position:top left;background-repeat: ; ....dst
Yap, sekian trik simpel mengenai cara mengganti background  blog.
mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Cara Mengganti Gambar Background Blog di Blogger/Blogspot
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 96 Comment(s):

pandu said...

makasih banyak gan.......
postingan anda sangat membantu

Unknown said...

makasi brow,.,.,..,
sngat mmbantu,..,.,
numpang promosi blog sya y.,,.hehe

http://indahnyapulaubali.blogspot.com/

Kartika Dewi said...

Ini yg ku cari mas. makasih buat infonya ya. mantap !

Shanty Nurcahya said...

mantaf....tampilan blog ane tambah OK...thanK ya...smoga suKses sLlu

kowandy said...

uda ku coba..berhasill..thnks ya

mtsdarulhikamtracal said...

Thanks bos buwanyak...
sekalian ane izin ane kopas nGihh...
skali lagi trimakasih

unic29 said...

mantabbb gan ilmunya

bisnis rumahan...hasil gedongan. said...

msh bingung.... =(

Mr.X said...

Mntap bang . .
thx ilmunya yak . .

anto said...

makasih gan, mantap

Oppa-Fresh said...

thanks ya,,,
ngebantuu banget...
www.oppa-fresh.blogspot.com

Unknown said...

Makasih gan infonya

Mull Amur Lolong said...

kalo memasukkan ganbar di sidebar. trus sidebarnya gak bergerak kalo di scroll, Bisa tidak yach mas?

Unknown said...

mau tanya gimana gan cara bikin gambar ada zoom out dan zoom in.

terima kasih.

dani said...

Thank you

Anonymous said...

mas mau tanya cara membuat menu yang ketika di buka, akan masuk ke halaman lain/baru yang berisi file yang telah kita apload. Mohon di bantu ya mas, mksh...

tjah elek dwe said...

mantaf pokoknya. Ikut nimbrung aja, salam sjah tera buat. Para Master2 yg dah bnyk ngjri aku, hehe

Lentera Langit said...

salam kenal mas.., izin nyoba yaa :), thx...

Unknown said...

berguna banget, thanks

Togok said...

Klo cara ngasih link gmna sob, jadi pas BG di klik tertuju link tsb..

Unknown said...

gambar background (dengan CSS) tidak bisa diberi hyperlink. Cek disini untuk link gambar: http://buka-rahasia.blogspot.com/2011/05/html-link-gambar-dan-atribut-penting.html

YUNIARTO ISTIAWAN said...

terima kasih infonya sangat bermanfaat

Kucoba.com Tempat Add Bookmark said...

Kayaknya boleh juga nih informasinya untuk diterapkan ke blog sendiri. makasih atas infonya ya....

Drs. Asep Supriatna said...

trims ya info nya

bejilbab said...

nah ini yang saya cari cari2,,
mudah2an website saya jadi tambah enak di lihat

Majelis Seroja said...

terima kasih sob infonya, tapi saya mau tanya cara membuat background terdapat pilihanya gimana ya ? jadi nanti backgroundnya bisa digonta ganti sendiri sama pengunjung ? thx atas infonya

sundaboy said...

mantap gan

shop for modification said...

wduh masih bingung gan --". pie iki...

Reza Khairunnisa Jessica Jung said...

truz, cara cari tau url gambarnya gmn??

Anonymous said...

nice sobat..like your blog

Apriska Dwi Aryanti said...

nyari letak body nya susaaah... ;(

Anonymous said...

udah ketemu gan, tp pas saya gnti pake gambar,, udah saya simpan, tp tetap background nya warna hitam . .

Unknown said...

Sob saya lg nyari background yg kaya di blognya sobat tp ngga ktemu2 nih? mhon bantuanya sob??

chank_supri said...

numpang mampir gan... untuk nambah pengetahuan

caraBisnisPulsa said...

Jadi pengen buat blog nih..

Abil said...

kalo untuk mengganti beground footer gimana ya gan?

Unknown said...

@abil, saya butuh tahu kode CSS footer template blog sobat dulu

Tha u N' Vic said...

ko repeat-x terus ditambah repeat-y jadi putih ya? knp

Rizal Uye said...

mas saya blm faham ini yg misal body{background-image: url(alamat url gambar anda);ini di tempatkan di tiap kata body di templete apa gmn?
mohon penjelasan

admin said...

terims infonya

keputihan said...

siap ,, makasih gan mantabbbbb

PULSA MURAH said...

informasi yg bermanfaat, akan sy paraktekan di blog saya.

nenden said...

postingan yang bermanfaat,semoga bermanfaat juga untuk masyarakat luas.
bila ada waktu kunjungi juga blog saya di http://imaniar.blog.stisitelkom.ac.id/
Terimakasih :)

yan said...

Mas kalau backgroudnya tidak pakai gambar bisa ga hanya kode warna saja agar blog tambah ringan,
tolong di bantu.

idbloggerbuzz said...

saya coba dulu gan...pas lg adamslh nih..eh ama si embah disuruh ke blog agan... :)

Uesugi Guro said...

Berguna banget infonya gan... :)
Mkasih banyaakk dahh...

Gan,,ane numpang join ya ^_^
Join juga blog aku jika agan mau

Thanks :)

Unknown said...

Thanks
xD

Mike said...

Kalo untuk bisa di next prev gambarnya, tambahkan kode pa ya?

dana tunai said...

blog yg bagus,penuh dgn inpo yg menarik....ane coba terap di blog ane gan...http://pinjamanuang.blogspot.com

pak kusir said...

punya saya sudah berganti menjadi batik thanks pak dosen hehehe

Unknown said...

gk paham nih bisa di beri yg lebih komplitnya gk?? sya ganti background malah yg muncul tulisan doang bukan gambarnya ~_~

Farhan Breaker said...

thanks ,,, ats infony

Ivan Adi Sofyan said...

Bermanfaat banget ni :D thank's sob

Bayu Handono said...

thanks imunya kang :D

Unknown said...

cool..
http://www.rajalistrik.com

Anonymous said...

Mantaff Mas,, TERIMA KASIH INFONYA....

Unknown said...

Semisal gambarnya tidak mencukupi, solusinya gmn mas?
tp kalau diulang kan jelek banget.

Unknown said...

Ya gambar harus di set sesuai dengan lebar. Gunakan fixed.

Unknown said...

Mas, punya saya kodenya seperti ini:

body{background:url(http://freedomwallpaper.com/wallpaper/Windows-7-HD-Wallpapers-1920x1080-17.jpg);background-position:center;background-attachment:fixed;margin:0 auto;color:#fff;text-shadow:2px 2px 2px #000;font:14px Droid sans;text-align:left;line-height:1.3em}li{list-style:none}

Terus bagaimana kalau dibuar fixed?

ohya,nanti semisal gambarnya saya beri ukuran yg kecil boleh? dikompres gitu. trs pixel nya jg dikurangi boleh?

Unknown said...

itu sudah fixed itu > background-attachment:fixed

artinya, setiap badan halaman discroll ke bawah, background tetap tidak bergerak.

Berarti ukuran gambar anda kurang besar. Gunakan gambar yang lebarnya memenuhi lebar screen anda, tapi ini relatif pada pengguna dengan ukuran screen tertentu. Dan ukuran gambar yang besar tentu filenya lebih besar.

Atau biar meskipun gambar ga selebar screen, mesti di kasih latar warna lagi di belakang background gambar, agar tidak terkesan kosong.

Tambahkan kode warna di bagian ini:

body{background:#KODEWARNA url(http://freedomwal..

kode-kode warna bisa dilihat di sini:
http://buka-rahasia.blogspot.com/p/hex-color-chart-generator-compose-your.html

Anonymous said...

Terima kasih mas, admin yang aktif dan menyenangkan

Unknown said...

Akhirnya berhasil juga mas, terimakasih atas tutornya dan itu sangat bermanfaat buat blog saya di www.windows8kita.com

Admin said...

Gan sy kok ngga ada code body{

Ini blog sy www.raja-vcc.com

Unknown said...

ada, pake spasi, seperti ini:
body {

Unknown said...

kalo gak bisa pake ctrl+f gimana? kesuliatan nyari body { nih

Unknown said...

Harusnya bisa, cara paling mudah adalah dengan CTRL + F.
body ada di bagian atas, jadi dicari pelan2 ke bawah juga bisa.

Unknown said...

Tengx banget ya

Unknown said...

izin coba mas ya

Unknown said...

thunksgan..atas ilmunya semoga bermanfaat amin..

Unknown said...

kagak ada "body{" adanya juga "body>"
tolong petunjuk nya gan!

Unknown said...

pasti ada, biasanya ditulis terpisah atau tidak terpisah, atau dibarengi dengan deklarator lain.

ni di templatemu:

body, .body-fauxcolumn-outer { background: ...dan seterusnya.

Unknown said...

alhamdulillah
sudh ktemu dan saya sudah bisa ganti2 background sendiri

جزك الله خيرا كثيرا / thnx so much/ matur nuwun saget/ nrima nihan/ arigato gozaimats/ gracias/ :)

ilmu saya semakin bertambah, good luck pak!!

Unknown said...

terima kasih, akhirnya bisa ganti background sesuai keinginan,,,
skali lgi terimakasih banyak,,,:)

Arifin saputra said...

maaf gan ini jumpa perdana dengan saya... saya cari kode body tapi tiadak ketemu ada kode body tapi bukan yang agan maksud jadi ga bisa ga tolong kasih tau dan ketika saya tekan ctrl f dia juga tidak muncul...di tunggu jawabannya salam

saurnamah said...

akhirnya nemu jg tutornya . thxs info nya

arun said...

SUSAH gan kagak mau ke ubah -_- latar backround nya

Unknown said...

Halo, silahkan dicek dulu sangat mungkin ada kesalahan saat anda memasukkan kode atau url gambar.
Atau kasih url blogmu biar saya cek.

elkosongsiji said...

Di template saya gag ada gan body nya. JAdi gag nyaman gitu lihat bagraund nya samping kanan kiri halaman warna putih putih. Mohon pencerahannya gan..

http://mployalis01.blogspot.com/

Unknown said...

setelah ke dashboard saya gk ketemu sama menu design atau rancangan

Unknown said...

@Novi: Sekarang bukan ke design/rancangan lagi, tapi dari dashboard ke > Template > Klik Edit HTML

Unknown said...

@MPLoyalis: Ada.
Cari ini:

body .navbar {display:none;}

Turunkan .navbar dan seterusnya ke bawah, dan tambahkan CSS background pada body. menjadi seperti ini:

body {tambahkan CSS background di sini}
.navbar {display:none;}

eonedavilza said...

tq gan infonya...

Unknown said...

Mantap bos artiklenya bagus bnget..
Smga sukses selalu..

Unknown said...

ga ngerti .. :(
template nya ga ktemu .. :(
d mana sih .. :(

SD N Tawangsari said...

MATURNUWON PAK.... IJIN (P.K.L) (y)

21Johan said...

izin menyimak dan menerapkan bos,,
berhasil nih,,
makasih banget yaa,, ^^
http://jomblolink.blogspot.com/

21Johan said...

kagak bisa mas bro,,
kiri kanan blog ane jadi kosong,,
gambar udah besar diatas 1800X1200an,,
apa solusinya ya?
http://jomblolink.blogspot.com

Unknown said...

thanks

Unknown said...

kalo untuk merubah warna gmana sob ?

Unknown said...

thanks banget

Unknown said...

terima kasih teman bloger ok saya dah ngerti sekarang

Unknown said...

klo pake background gif bs ga ya??

Klinik Obat Kuat said...

blog yang bagus. ganti latar susah aku gak bisa fotoshop

Koodipc said...

makasih banyak mas,

Unknown said...

bagi saya sih cukup mbingungin ... tpi saaya cobak dulu ,, soalnya dari dulu pengen ngubah background tapi gak tau caranya,,

Unknown said...

makasi brwo atas blogger'y..

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap