Cara Mengganti Background Blog Dengan Mudah

Pada template standar blogger sebenarnya sudah tersedia fasilitas untuk mengganti background, baik mengganti warna background saja atau mengganti background dengan gambar - image. Namun warna dan gambar untuk background yang tersedia pada blogger tersebut sangat terbatas.

Agar lebih leluasa dalam mengganti background baik berupa warna maupun gambar, maka yang perlu dilakukan adalah merubah property dan value dari kode css terkait body.

"Cara mengganti bakground blog dengan mudah adalah dengan merubah kode css selector body. Background dapat diganti dengan warna lain atau diganti dengan gambar"

Klik gambar untuk memperbesar tampilan

Berikut adalah cara mengganti background blog dengan warna lain dan cara mengganti background blog dengan gambar:

1. Mengganti Background blog dengan warna lain
Langkah 1:
Login ke blogger.com ---> Template ---> Edit Html ---> dengan Ctrl+F cari kode ]]></b:skin>

Langkah 2:
Letakkan kode css di bawah ini tepat di atas kode ]]></b:skin>

body {
  background: #c61;
  padding: 0px;
}

.body-fauxcolumn-outer  .fauxcolumn-inner, .body-fauxcolumn-outer  .cap-top, .body-fauxcolumn-outer  .cap-top  .cap-left {
  background: none;
}

Langkah 3:
Simpan Template, dan selesai

Keterangan:
padding: 0px dimaksudkan agar tidak ada jarak antara background dengan batas tepi layar komputer, sebab biasanya secara default blogger memakai padding-left atau kiri pada body nya.

#c61 adalah kode warna background secara singkat. Secara default kode warna biasanya adalah #+6digit kode, misalnya #052d52.

.body-fauxcolumn-outer dan seterusnya value nya diisi dengan "none", hal ini untuk menon aktifkan segala efek background yang biasanya secara default sudah ditentukan pada template standar blogger.

Ilustrasi penggantian warna background blog dapat dilihat pada:

• Gambar Background Blog Sebelum Ganti Warna
• Gambar Background Blog Setelah Ganti Warna

2. Mengganti Background Blog Dengan Gambar
Langkah 1:
Siapkan gambar yang akan dijadikan background, dalam contoh ini saya gunakan gambar burung dengan ukuran 100px X 75px. Simpan gambar tersebut di hosting image online untuk mendapatkan alamat atau url gambar (contoh: http://.....gambar.png).

Sebaiknya memakai hosting image picasaweb.google.com agar lebih praktis dan patent. Bagi yang belum tahu cara mendapatkan url gambar silahkan baca artikel Cara Mendapatkan Alamat Url Gambar atau foto.

Langkah 2:
Login ke blogger.com ---> Template ---> Edit Html ---> dengan Ctrl+F cari kode ]]></b:skin>

Langkah 3:
Letakkan kode css di bawah ini tepat di atas kode ]]></b:skin>

body {

  background: url('https://lh3.googleusercontent.com/-aq2Tukgpf08/Uxz9XrGsYQI/AAAAAAAAAjY/kR5Byv991_8/s100/robin2.png') repeat scroll left top transparent;

  padding: 0px;

}

.body-fauxcolumn-outer  .fauxcolumn-inner, .body-fauxcolumn-outer  .cap-top, .body-fauxcolumn-outer  .cap-top  .cap-left {

  background: none;

}

Langkah 3:
Simpan Template, dan selesai

Keterangan:
Pada background terdapat kode repeat scroll left top transparent, maksudnya adalah:
repeat: Gambar mengalami duplikasi pengulangan ke kiri, ke kanan, ke atas dan ke bawah. Alternatif lainnya no-repeat: Gambar tidak terduplikasi, repeat-x: gambar akan di duplikasi hanya ke kiri atau ke kanan, repeat-y: gambar akan diduplikasi hanya ke atas dan ke bawah.

scroll: Background gambar akan ikut bergerak saat halaman di scroll. Bila menginginkan gambar tidak bergerak atau tetap maka ganti dengan fixed.

left top: menunjukkan posisi gambar berawal yaitu dari kiri atas. Alternatif lainnya adalah center, bottom dan right.

transparent: menunjukkan warna background yang dikehendaki bila tidak tertutup gambar. Hal ini hanya berlaku bila duplikasi atau pengulangan gambarnya menggunakan nilai repeat-x atau repeat-y. Transparent bisa diganti dengan kode warna, misal #f6f6f6.

Ilustrasi penggantian background blog dengan gambar dapat dilihat pada:

• Gambar Background Blog Sebelum Diganti
• Gambar Background Blog Setelah Diganti Dengan Gambar.

Lantas bagimana jika menginginkan background blog hanya dengan satu gambar dengan tampilan full atau penuh tapi tanpa penceng, tanpa peang dan secara otomatis gambarnya selalu menyesuaikan dengan resolusi layar komputer pembaca blog? Tunggu artikel yang akan saya tulis selanjutnya.

Selamat mencoba dan moga sukses.

Related Posts :