Cara Mengubah Background Blog Dengan Gambar

Kebanyakan blog memilih backgroundnya dengan warna solid daripada dengan gambar, hal ini dikarekan agar loading blog kita menjadi cepat. Bayangkan jika ada pengunjung blog kamu ingin membaca salah satu artikel namun karena loading itu sangat lambat, pengunjungpun akan merasa jengkel sehingga keluar dan beralih ke blog lain.

Selain itu, kelebihan background blog dengan warna solid atau warna yang rata membuat mata lebih nyaman ketika hendak membaca sebuah artikel yang di sajikan dalam blog tersebut.

Namun Jika kamu memang ingin mengubah background blog dengan gambar, sebaiknya kurangi beberapa widget yang menurut kamu tidak penting. Sehingga kemungkinan kecepatan blog kamu hanya berkurang sedikit. Serta gunakan gambar yang ingin di jadikan backgroun blog dengan ukuran maksimal 500kb (Lebih baik dibawah 100kb). Untuk resolusi sesuai keinginan kamu saja, tapi lebih baik di bawah 1200px x 800px dan gunakan format jpg atau jpeg.

Cara Mengubah Background Blog Dengan Gambar


Jika sudah oke atau mempunyai gambar sekarang waktunya menerapkannya. Berikut ini cara mengubah background blog fengan gambar:

1. Simpan gambar/foto dimana saja yang penting bersifat publik dan bisa dilihat orang (Disini saya menggunakan mediafire)

2. Buka blogger.com kamu

3. Klik Tema pada sidebar -> Kemudian pilh Edit/HTML

Kode body untuk Mengubah Background Blog Dengan Gambar

4. Cari Kode body{ atau body {

5. Jika sudah ketemu silahkan ganti yang saya tandai dengan kode dibawah ini
url(http://www.mediafire.com/convkey/1d2e/5ld3cx1wdd8gev2zg.jpg) repeat ;


6. Sehingga menjadi
body {

background: url(http://www.mediafire.com/convkey/1d2e/5ld3cx1wdd8gev2zg.jpg) no-repeat ;

margin: 0 0 0 0;

padding: 0 0 0 0;

color: #777777;

font: normal normal 16px Roboto, Arial, sans-serif;

text-align: left;

}

Note:     
  • Jangan lupa ganti url gambar/foto kamu
  • repeat berfungsi untuk menampilkan gambar berulang-ulang.
  • no-repeat berfungsi untuk menampilkan gambar tunggal dan tidak berulang-ulang.
  • repeat-x berfungsi untuk mengulangi gambar secara vertikal.
  • repeat-y berfungsi untuk mengulangi gambar secara horzontal.

7.    Selesai, silahkan lihat hasilnya



Berlangganan update artikel terbaru via email:

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel