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::
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:
Yap, sekian trik simpel mengenai cara mengganti background blog.body{background:url(http://2.bp.blogspot.com/_wnULV7UHiXY/TSOhgPOpqXI/AAAAAAAAAH8/dC7uwZp1HA0/s1600/t28_blue_background.jpg);background-position:top left;background-repeat: ; ....dst
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.
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.
Author:
makasih banyak gan.......
postingan anda sangat membantu
makasi brow,.,.,..,
sngat mmbantu,..,.,
numpang promosi blog sya y.,,.hehe
http://indahnyapulaubali.blogspot.com/
Ini yg ku cari mas. makasih buat infonya ya. mantap !
mantaf....tampilan blog ane tambah OK...thanK ya...smoga suKses sLlu
uda ku coba..berhasill..thnks ya
Thanks bos buwanyak...
sekalian ane izin ane kopas nGihh...
skali lagi trimakasih
mantabbb gan ilmunya
msh bingung.... =(
Mntap bang . .
thx ilmunya yak . .
makasih gan, mantap
thanks ya,,,
ngebantuu banget...
www.oppa-fresh.blogspot.com
Makasih gan infonya
kalo memasukkan ganbar di sidebar. trus sidebarnya gak bergerak kalo di scroll, Bisa tidak yach mas?
mau tanya gimana gan cara bikin gambar ada zoom out dan zoom in.
terima kasih.
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...
mantaf pokoknya. Ikut nimbrung aja, salam sjah tera buat. Para Master2 yg dah bnyk ngjri aku, hehe
salam kenal mas.., izin nyoba yaa :), thx...
Klo cara ngasih link gmna sob, jadi pas BG di klik tertuju link tsb..
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
terima kasih infonya sangat bermanfaat
Kayaknya boleh juga nih informasinya untuk diterapkan ke blog sendiri. makasih atas infonya ya....
trims ya info nya
nah ini yang saya cari cari2,,
mudah2an website saya jadi tambah enak di lihat
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
wduh masih bingung gan --". pie iki...
truz, cara cari tau url gambarnya gmn??
nice sobat..like your blog
nyari letak body nya susaaah... ;(
udah ketemu gan, tp pas saya gnti pake gambar,, udah saya simpan, tp tetap background nya warna hitam . .
Sob saya lg nyari background yg kaya di blognya sobat tp ngga ktemu2 nih? mhon bantuanya sob??
numpang mampir gan... untuk nambah pengetahuan
Jadi pengen buat blog nih..
kalo untuk mengganti beground footer gimana ya gan?
@abil, saya butuh tahu kode CSS footer template blog sobat dulu
ko repeat-x terus ditambah repeat-y jadi putih ya? knp
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
terims infonya
siap ,, makasih gan mantabbbbb
informasi yg bermanfaat, akan sy paraktekan di blog saya.
Mas kalau backgroudnya tidak pakai gambar bisa ga hanya kode warna saja agar blog tambah ringan,
tolong di bantu.
saya coba dulu gan...pas lg adamslh nih..eh ama si embah disuruh ke blog agan... :)
Berguna banget infonya gan... :)
Mkasih banyaakk dahh...
Gan,,ane numpang join ya ^_^
Join juga blog aku jika agan mau
Thanks :)
Thanks
xD
Kalo untuk bisa di next prev gambarnya, tambahkan kode pa ya?
blog yg bagus,penuh dgn inpo yg menarik....ane coba terap di blog ane gan...http://pinjamanuang.blogspot.com
punya saya sudah berganti menjadi batik thanks pak dosen hehehe
gk paham nih bisa di beri yg lebih komplitnya gk?? sya ganti background malah yg muncul tulisan doang bukan gambarnya ~_~
thanks ,,, ats infony
Bermanfaat banget ni :D thank's sob
thanks imunya kang :D
cool..
http://www.rajalistrik.com
Mantaff Mas,, TERIMA KASIH INFONYA....
Semisal gambarnya tidak mencukupi, solusinya gmn mas?
tp kalau diulang kan jelek banget.
Ya gambar harus di set sesuai dengan lebar. Gunakan fixed.
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?
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
Terima kasih mas, admin yang aktif dan menyenangkan
Akhirnya berhasil juga mas, terimakasih atas tutornya dan itu sangat bermanfaat buat blog saya di www.windows8kita.com
Gan sy kok ngga ada code body{
Ini blog sy www.raja-vcc.com
ada, pake spasi, seperti ini:
body {
kalo gak bisa pake ctrl+f gimana? kesuliatan nyari body { nih
Harusnya bisa, cara paling mudah adalah dengan CTRL + F.
body ada di bagian atas, jadi dicari pelan2 ke bawah juga bisa.
Tengx banget ya
izin coba mas ya
thunksgan..atas ilmunya semoga bermanfaat amin..
kagak ada "body{" adanya juga "body>"
tolong petunjuk nya gan!
pasti ada, biasanya ditulis terpisah atau tidak terpisah, atau dibarengi dengan deklarator lain.
ni di templatemu:
body, .body-fauxcolumn-outer { background: ...dan seterusnya.
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!!
terima kasih, akhirnya bisa ganti background sesuai keinginan,,,
skali lgi terimakasih banyak,,,:)
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
akhirnya nemu jg tutornya . thxs info nya
SUSAH gan kagak mau ke ubah -_- latar backround nya
Halo, silahkan dicek dulu sangat mungkin ada kesalahan saat anda memasukkan kode atau url gambar.
Atau kasih url blogmu biar saya cek.
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/
setelah ke dashboard saya gk ketemu sama menu design atau rancangan
@Novi: Sekarang bukan ke design/rancangan lagi, tapi dari dashboard ke > Template > Klik Edit HTML
@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;}
tq gan infonya...
Mantap bos artiklenya bagus bnget..
Smga sukses selalu..
ga ngerti .. :(
template nya ga ktemu .. :(
d mana sih .. :(
MATURNUWON PAK.... IJIN (P.K.L) (y)
izin menyimak dan menerapkan bos,,
berhasil nih,,
makasih banget yaa,, ^^
http://jomblolink.blogspot.com/
kagak bisa mas bro,,
kiri kanan blog ane jadi kosong,,
gambar udah besar diatas 1800X1200an,,
apa solusinya ya?
http://jomblolink.blogspot.com
kalo untuk merubah warna gmana sob ?
thanks banget
terima kasih teman bloger ok saya dah ngerti sekarang
klo pake background gif bs ga ya??
blog yang bagus. ganti latar susah aku gak bisa fotoshop
makasih banyak mas,
bagi saya sih cukup mbingungin ... tpi saaya cobak dulu ,, soalnya dari dulu pengen ngubah background tapi gak tau caranya,,
makasi brwo atas blogger'y..
Post a Comment