Cara Mengganti Gambar Background Blog di Blogger/Blogspot ~ HESARZTITOE

Home » Blog Tips » HTML-CSS Tricks » Cara Mengganti Gambar Background Blog di Blogger/Blogspot

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 anda dan pilih tab menu design/rancangan.

2. Pilih Edit HTML

3. Centang expand widget template di sebelah kanan atas template HTML.

4. Kemudian anda cari kode tag ini: body{ (gunakan Ctrl+F untuk mencari dengan cepat)

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
Rating: 4.8 Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan code ini atau share dengan Facebook like diatas/sharing tool di bawah. 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.

<a   href="http://buka-rahasia.blogspot.com/2011/01/cara-mengganti-gambar-background-blog.html">Cara  Mengganti Gambar Background Blog di Blogger/Blogspot</a>

36 Comment(s):

pandu said...: makasih banyak gan....... postingan anda sangat membantu; September 23, 2011 1:53 PM
ajuztfromBALi said...: makasi brow,.,.,.., sngat mmbantu,..,., numpang promosi blog sya y.,,.hehe http://indahnyapulaubali.blogspot.com/; October 15, 2011 11:10 AM
Kartika Dewi said...: Ini yg ku cari mas. makasih buat infonya ya. mantap !; November 23, 2011 10:45 PM
Duni@_qu Curh@t_qu said...: mantaf....tampilan blog ane tambah OK...thanK ya...smoga suKses sLlu; November 29, 2011 12:57 AM
kowandy said...: uda ku coba..berhasill..thnks ya; December 20, 2011 8:47 AM
mtsdarulhikamtracal said...: Thanks bos buwanyak... sekalian ane izin ane kopas nGihh... skali lagi trimakasih; December 27, 2011 5:19 PM
unic29 said...: mantabbb gan ilmunya; December 30, 2011 8:31 AM
bisnis rumahan...hasil gedongan. said...: msh bingung.... =(; January 1, 2012 11:55 PM
Mr.X said...: Mntap bang . . thx ilmunya yak . .; January 5, 2012 8:45 PM
anto said...: makasih gan, mantap; January 20, 2012 10:20 AM
Oppa-Fresh said...: thanks ya,,, ngebantuu banget... www.oppa-fresh.blogspot.com; January 29, 2012 2:51 PM
Nusantara Media said...: Makasih gan infonya; January 30, 2012 3:56 PM
Mull Amur Lolong said...: kalo memasukkan ganbar di sidebar. trus sidebarnya gak bergerak kalo di scroll, Bisa tidak yach mas?; January 30, 2012 4:49 PM
M Taufik said...: mau tanya gimana gan cara bikin gambar ada zoom out dan zoom in. terima kasih.; February 15, 2012 4:46 PM
dani said...: Thank you; February 23, 2012 12:45 AM
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...; March 9, 2012 2:41 AM
tjah elek dwe said...: mantaf pokoknya. Ikut nimbrung aja, salam sjah tera buat. Para Master2 yg dah bnyk ngjri aku, hehe; March 12, 2012 6:49 AM
Lentera Langit said...: salam kenal mas.., izin nyoba yaa :), thx...; March 21, 2012 7:44 PM
GERI DAULAN MUSTAWAN said...: berguna banget, thanks; March 23, 2012 11:26 AM
Togok said...: Klo cara ngasih link gmna sob, jadi pas BG di klik tertuju link tsb..; March 25, 2012 1:26 AM
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; March 25, 2012 7:04 AM
YUNIARTO ISTIAWAN said...: terima kasih infonya sangat bermanfaat; March 26, 2012 11:25 PM
Kucoba.com Tempat Add Bookmark said...: Kayaknya boleh juga nih informasinya untuk diterapkan ke blog sendiri. makasih atas infonya ya....; April 13, 2012 3:19 AM
Drs. Asep Supriatna said...: trims ya info nya; April 19, 2012 11:17 PM
bejilbab said...: nah ini yang saya cari cari2,, mudah2an website saya jadi tambah enak di lihat; April 23, 2012 12:31 AM
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; May 3, 2012 10:50 PM
sundaboy said...: mantap gan; May 8, 2012 5:46 PM
shop for modification said...: wduh masih bingung gan --". pie iki...; May 9, 2012 9:53 AM
Reza Khairunnisa Jessica Jung said...: truz, cara cari tau url gambarnya gmn??; May 12, 2012 7:15 AM
gopar-it said...: nice sobat..like your blog; May 13, 2012 4:16 AM
Apriska Dwi Aryanti said...: nyari letak body nya susaaah... ;(; May 20, 2012 2:41 PM
Anonymous said...: udah ketemu gan, tp pas saya gnti pake gambar,, udah saya simpan, tp tetap background nya warna hitam . .; May 23, 2012 1:07 PM
rio said...: Sob saya lg nyari background yg kaya di blognya sobat tp ngga ktemu2 nih? mhon bantuanya sob??; June 6, 2012 11:58 AM
chank_supri said...: numpang mampir gan... untuk nambah pengetahuan; June 6, 2012 10:22 PM
caraBisnisPulsa said...: Jadi pengen buat blog nih..; June 16, 2012 12:42 PM
Abil said...: kalo untuk mengganti beground footer gimana ya gan?; June 26, 2012 1:00 AM