Cara Mengganti Background Blog Lengkap - Ada 2 (dua) cara untuk mengganti background dari sebuah blog. Cara pertama adalah melalui fasilitas "sesuaikan" template yang telah disediakan blogger. Dan yang kedua adalah dengan cara merubah kode css background yang terdapat pada selector "body".Dalam artikel ini akan saya uraikan bagaimana cara mengganti background blog dengan cara yang kedua yaitu merubah kode css body. Sebab dengan cara ini akan lebih leluasa dalam mengganti berbagai warna dan berbagai gambar.
Klik gambar untuk memperbesar tampilan
"Cara mengganti bakground blog dengan warna lain atau gambar adalah dengan merubah kode css selector body"
Berikut adalah cara mengganti warna background blog dan cara mengganti background blog dengan gambar:
1. Mengganti Warna Background blog
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:
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).
Saya sarankan 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.
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.
0 Comments