Minggu, 24 Maret 2013

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, contohx bg blog saya , saya mrnggunakan gambar naruto sbg bg blog saya, kreen buka. 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.
 
 
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, contohx bg blog saya , saya mrnggunakan gambar naruto sbg bg blog saya, kreen buka. 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.
 
 
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, contohx bg blog saya , saya mrnggunakan gambar naruto sbg bg blog saya, kreen buka. 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.
Diposting oleh di

17 komentar:

  1. Unknown12 Juni 2013 pukul 21.24

    kerrreeeeeeeeeeeeen..............:)
    gmana sih caranya ngerubah backgroundnya..
    alnya masih blajar ....hehe

    BalasHapus
  2. Ngurah22 Juli 2013 pukul 01.18

    gan,tetep ga mau nih.. padahal udah make background size 100%
    "no-repeat" juga.. tp tetep ga mau full kayak agan (T____T)

    BalasHapus
    Balasan
    1. Unknown25 Juli 2013 pukul 02.50

      uda bnar masukin kode htmlx gak gan.....(y)

      Hapus
  3. Unknown16 Oktober 2013 pukul 21.30

    nyai link gambarnya dimana sih?

    BalasHapus
    Balasan
    1. Unknown6 April 2014 pukul 19.41

      broswng om google za brow

      Hapus
    2. Unknown6 April 2014 pukul 19.54

      buat bikin link gambarx juga bisa mnggunakan mediafire..
      buat account mediafirex terlbi dahulu.. ntr upload gambarnya...lalu klil share.. tepat di bawanya ada link gambarnya... terima kasih uda berknjung...

      Hapus
  4. Unknown29 November 2013 pukul 04.42

    , mbak bagaimana caranya agar begroundnya tidak bergerak saat di scroll

    BalasHapus
    Balasan
    1. Unknown6 April 2014 pukul 19.43

      cukup gunakan kode no-repeat
      contox ada di atas...
      trma kasih uda brknjung.....

      Hapus
  5. Anonim25 November 2014 pukul 06.22

    Punya ku Pas HTML Gak ada Edit Kode ..gimana nih

    BalasHapus
  6. Anonim2 Desember 2014 pukul 21.34

    Contohnya masukin gimana kak? make tanda kurung juga apa enggak?

    BalasHapus
  7. Unknown27 Desember 2014 pukul 09.50

    pastinya ada mbk... setiap blogs arusx ada menu edit HTMLx... cba di teliti lagi mbak...

    BalasHapus
  8. Unknown28 Januari 2015 pukul 04.55

    bagus bgeeet

    BalasHapus
  9. khairul faisal3 Juni 2015 pukul 22.28

    gak bisa

    BalasHapus
  10. Unknown23 Desember 2015 pukul 22.08

    That's cool! Thanks for this blog helpme full!
    Feed back please http://animesakuin.blogspot.co.id/

    BalasHapus
  11. Unknown13 April 2016 pukul 22.09

    sebelah mana sih centang expand nya???

    BalasHapus
  12. Anonim28 Desember 2017 pukul 00.35

    Masih bingung ppemula bos

    BalasHapus

Langganan: Posting Komentar (Atom)