Home » » Cara Mengganti Background Blogspot

Cara Mengganti Background Blogspot

Written By Pandu Group on Mar 14, 2013 | 11:20 PM

Cara Mengganti Background Blogspot - Berbeda dengan blog yang backgroundnya warna gelap atawa semarak warna-warni kayak pelangi, pastinya akan membuat pengunjung merasa bosan dan tidak betah berlama-lama di blog tersebut. Kalau sebelumnya saya sudah pernah membahas cara mengganti background blog otomatis, maka dalam tutorial blog kali ini kita belajar mengganti background (latar belakang) blog dengan gambar.
Sekarang saya akan memberikan solusi untuk sobat yang kesulitan dalam mengatur ukuran background blog nya. okee.langsung saja mengikuti langkah" yang saya berikan dibawah ini..yang harus sobat lakukan sekarang adalah

  1. Login Ke Akun Blogger sobat
  2. Klik Menu Design
  3. Lalu Klik Edit HTML
  4. dan jangan lupa di centang Expand Widget nya (untuk berjaga" kalau ada yang error)
  5. tambah kan code berikut Setelah URL background nya.
no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

CONTOH : 
{ background:#000 url(http://i1231.photobucket.com/albums/ee519/noochii/hulk-movie-wallpaper.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

    6. Simpan Template sobat dan lihat lah hasilnya.. :)
Semoga artikel saya bermanfaat.. selamat mencoba.. :)


Cara lainnya:
Ganti/edit kode CSS awal background blog anda dengan memberikan penambahan URL gambar sehingga bentuk susunan CSS menjadi seperti dibawah ini.
body{
background:#ded8c0;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGYSQQawnyXuwrdaagVarj-lxnTC1ZllZaePC4y22nQ805dc2Pdq7qgk0XMfXf5cr1hFSrfvtaUVIqFWiMNnF1B6ROG_qEM5GUPJ1kR6Khxl489oq49eOQ9EUrvlpr61kBPymW6tlmUSUR/s1600/background-blog-post-200.png);background-repeat: repeat-x repeat-y;
color:#28261A;
font:12px verdana,arial,Sans-erif;
text-align:left;
margin:0;
line-height:1.6em;
}
NB:
repeat-x : untuk mengulang gambar dari kiri ke kanan (horizontal)
repeat-y : untuk mengulang gambar dari atas ke bawah (vertikal)
Ada lagi cara lainnya:
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

Beberapa link referensi trik atau Cara Mengganti Background Blogspot:
http://noochiiartikel.blogspot.com/2011/08/cara-agar-background-blog-full-size.html
http://www.rayhanzhampiet.com/2012/04/mengganti-background-blog-dengan-gambar.html
http://buka-rahasia.blogspot.com/2011/01/cara-mengganti-gambar-background-blog.html

0 comments:

Post a Comment