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
google

Catatan:
Jika anda menemui tutorial lama, maka perhatikan bahwa untuk masuk ke Edit HTML template tidak lagi melalui halaman "design/rancangan", melainkan dari dashboard > template > klik edit HTML. Masih bingung mencari dan edit kode di Edit HTML Blogger baru? Simak tips trik berikut:
1. Cara Mencari Kode di HTML Editor Blog
2. Fitur di HTML Editor Baru
3. Tips Edit HTML Blogger (artikel lama)
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 94 Comment(s):

pandu said...

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

ajuztfromBALi 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 !

Duni@_qu Curh@t_qu 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

Nusantara Media said...

Makasih gan infonya

Mull Amur Lolong said...

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

M Taufik 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...

GERI DAULAN MUSTAWAN said...

berguna banget, thanks

Togok said...

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

Ahmad Khoirul Azmi 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??

gopar-it 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 . .

rio 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?

Ahmad Khoirul Azmi said...

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

Serz Corner said...

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

ilmu gratis.blog 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... :)

Gusti-Kun said...

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

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

Thanks :)

Maxnia Pico 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

ingintahu lebihjauh 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

raja listrik said...

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

Abdul Kholik said...

Mantaff Mas,, TERIMA KASIH INFONYA....

Auriga Maulana Khasan said...

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

Ahmad Khoirul Azmi said...

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

Auriga Maulana Khasan 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?

Ahmad Khoirul Azmi 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

aurigamaulana said...

Terima kasih mas, admin yang aktif dan menyenangkan

lenton podo said...

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

RALDY P said...

Gan sy kok ngga ada code body{

Ini blog sy www.raja-vcc.com

Ahmad Khoirul Azmi said...

ada, pake spasi, seperti ini:
body {

Shintia Damayanti said...

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

Ahmad Khoirul Azmi said...

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

Yudis Julianto said...

Tengx banget ya

aditiya karisma said...

izin coba mas ya

kmnu upi said...

thunksgan..atas ilmunya semoga bermanfaat amin..

Shoni Azka said...

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

Ahmad Khoirul Azmi said...

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

ni di templatemu:

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

Shoni Azka 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!!

zela fitrianingsih 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

zachrun fuady said...

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

Ahmad Khoirul Azmi said...

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

MP LOYALIS'01 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/

tina novi said...

setelah ke dashboard saya gk ketemu sama menu design atau rancangan

Ahmad Khoirul Azmi said...

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

Ahmad Khoirul Azmi 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;}

Eone Davilza said...

tq gan infonya...

Lingga Novandra said...

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

wuri ayu said...

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

SD N Tawangsari said...

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

Johan Wang said...

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

Johan Wang said...

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

kholilatun nikmah said...

thanks

Inspirasi ku said...

kalo untuk merubah warna gmana sob ?

Putaran Air said...

thanks banget

iswanto boiz said...

terima kasih teman bloger ok saya dah ngerti sekarang

sepatu murah said...

klo pake background gif bs ga ya??

Klinik Obat said...

blog yang bagus. ganti latar susah aku gak bisa fotoshop

Jafarudin Lukman said...

makasih banyak mas,

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

Join Our Team!

© 2013 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap