Kamis, 07 Februari 2013

Cara Mengganti Background Blog Dengan Gambar

Cara Mengganti Background Blog Dengan Gambar - Terimakasih buat sist Farida Ratna Sari atas komentarnya Disini "gmn sih cara mengganti background polos putih menjadi gambar?? aku coba tambah url kok gak bisa2 ya.. gak muncul2 gambarnya.. apa kodenya salah atau gmn?? tlg di jelaskn ya... termksh. aku suka templatenya tp gak suka warna backgroundnya yg polos.. jd pingin q ganti gtuu" Artikel tentang cara mengganti background blog dengan gambar ini merupakan request dari mbak Farida

Dan ini adalah background blog milik mbak Farida yang telah saya ganti tampilannya, maaf ya mbak Farida yang penting masih terlihat link blognya kan? hehee

Cara Mengganti Background Blog Dengan Gambar

Berikut Cara Mengganti Background Blog Dengan Gambar
  1. Silahkan cari kode-kode berikut untuk mengganti background blog dari setiap elemen blog yang akan diganti backgroundnya
  2. Background Blog Keseluruhan
    Cari kode body {
    Letakkan kode background: url(pasang link gambar background disini) repeat-y center; diantara kode body yang telah ada
    Hasilnya
    body {
    color: #000000;
    background: url(pasang link gambar background disini) repeat-y center;
    ---
    }
  3. Background Judul
    Cari kode #header-wrapper {
    Letakkan kode background: url(pasang link gambar background disini) repeat-x scroll left bottom; diantara kode #header-wrapper yang telah ada
    Hasilnya
    #header-wrapper {
    background: url(pasang link gambar background disini) repeat-x scroll left bottom;
    height:90px;
    width:100%;
    }

    Catatan: Beberapa template ada yang menggunakan #header-outer, #header-inner
  4. Background Posting atau Artikel Blog
    Cari kode #main-wrapper {
    Letakkan kode
background: url(pasang link gambar background disini)repeat-y; diantara kode #main-wrapper yang telah ada
Hasilnya
#main-wrapper {
background: url(pasang link gambar background disini)repeat-y;
float:left;
----
}

Catatan: Beberapa template ada yang menggunakan #content-wrapper
  • Background Diluar Area Posting
    Cari kode #outer-wrapper {
    Letakkan kode background: url(pasang link gambar background disini)none repeat scroll 0 0; diantara kode #outer-wrapper yang telah ada
    Hasilnya
    #outer-wrapper {
    background: url(pasang link gambar background disini)none repeat scroll 0 0;
    border:1px solid #000;
    ---
    }

    Catatan: Beberapa template ada yang menggunakan #inner-wrapper
  • Background Sidebar
    Cari kode #sidebar h3{
    Letakkan kode background:#9F9E9E url() repeat-x top;letter-spacing:-.001em;font:normal 12px Arial;color:#eee; diantara kode #sidebar yang telah ada
    Hasilnya
    #sidebar h3{
    background:#9F9E9E url() repeat-x top;letter-spacing:-.001em;font:normal 12px Arial;color:#eee;
    ---
    }

    Catatan: Beberapa template ada yang menggunakan #sidebar h2, .sidebar h2, .sidebar h3
  • Background Footer
    Cari kode #footer{
    Letakkan kode background: url() repeat-x scroll bottom;font:normal 12px Arial; diantara kode #footerr yang telah ada
    Hasilnya
    #footer{
    background: url() repeat-x scroll bottom;font:normal 12px Arial;
    ---
    }

    Catatan: Beberapa template ada yang menggunakan #footer-wrapper, .footer

  • Jika semua kode yang anda cari tidak ada didalam template blog anda, silahkan sesuaikan dengan nama elemen yang anda cari. Misalnya body, header, sidebar, main, content, dan footer. Dan jika masih belum menemukan kode-kodenya silahkan baca artikel berikut ini Cara Mengetahui Kode Template Blog Secara Profesional

    Terimakasih, semoga artikel ini bermanfaat dan memudahkan kita dalam mengedit blog kita. Jika ada pertanyaan, silahkan tinggalkan komentar untuk artikel ini, Cara Mengganti Background Blog Dengan Gambar

    Cara Mengganti Background Blog Dengan Gambar Rating: 4.5 Diposkan Oleh: Ana Sriwahyuni

    15 komentar:

    1. kok susah banget ya mbak. saya udah coba mengganti background keseluruhan dengan gambar peta tapi nggak bisa-bisa. Kira-kira masalahnya dimana ya.
      Makasih

      BalasHapus
    2. @Iwan Pongka coba di cek lagi mas pemasangan kodenya seperti repeat-x, repeat-y, repeat-x left scroll, dll

      BalasHapus
    3. Terima Kasih sobat udah mau membagi ilmunya .

      BalasHapus
    4. Thanks, tutorialnya sangat membantu.

      BalasHapus
    5. terimakasih infonya :) tp blm berhasil haha

      BalasHapus
    6. repeat-x, repeat-y, repeat-x left scrol itu fungsinya atau cara kerjanya itu bagaimana??

      BalasHapus
      Balasan
      1. pertanyaan saya juga sama apa fungsinya repeat itu ya..?

        Hapus
      2. cuma sepengetahuan ya dari hasil coba-coba,, soalnya juga masih baru buat blog... repeat itu untuk mengatur/menempatkan posisi gambar...
        kunjung balik gan

        Hapus
    7. pasang link gamba itu ambil nya di mana ya mba...??

      BalasHapus
    8. terima kasih gan postingannya ane mau coba ganti background blog ane gan bosen soalnya

      BalasHapus
    9. terimakasih ini sangat membantu

      BalasHapus
    10. info yang berguna, terima kasih

      BalasHapus

    Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
    Terimakasih

    Direktori

    direktori weblogger
    Direktori WeBlog Indonesia