Cara Mengganti Background Blog Dengan Gambar ~ Canela Blog

Cara mengganti background blog dengan gambar, secara keseluruhan. Background akan terlihat disemua bab yang ada diblog. Contoh background memakai gambar dapat dilihat di artikel background berbeda dihalaman berbeda. Untuk lebih jelasnya ikuti langkah-langkah dibawah ini.

Login ke blogger, dari halaman dasbor pilih pengaturan Tata Letak.
Dan pilih Desainer template > Tingkat Lanjut > Tambahkan CSS dan masukan arahan ini didalamnya.

body {
background: url(http://themes.googleusercontent.com/image?id=1iJBX-a-hBX2tKaDdERpElPUmvb4r5MDX9lEx06AA-UtZIQCYziZg3PFbmOyt-g2sH8Jo) repeat-x fixed top center;}

Terapkan ke blog selesai.

Keterangan kode:

background: url( yaitu url dari backgorund gambar yang akan digunakan.
repeat-x gambar mengulang kesamping. dapat diganti dengan repeat-y untuk gambar mengulang ke bawah atau no-repeat gambar tidak berulang.
fixed gambar akan tetap pada posisinya, walaupun halaman blog di scroll ke bawah.
top center posisi gambar. Top dapat diganti dengan bottom dan center dapat diganti dengan right atau left.
jika memakai backgorund gambar keseluruh bab blog. gunakanlah ukuran gambar yang besar, contoh: 1400 x 900

Pada dasarnya arahan body dipakai untuk mengatur seluruh background blog. Tapi jikalau tidak dapat jalan ditemplate kamu, coba ganti arahan body dengan arahan content. Contoh:

.content {
background: url(http://themes.googleusercontent.com/image?id=1iJBX-a-hBX2tKaDdERpElPUmvb4r5MDX9lEx06AA-UtZIQCYziZg3PFbmOyt-g2sH8Jo) repeat-x fixed top center;}

Sekarang coba lihat tampilan blog kamu. Jika background gambar tidak sepenuhnya terlihat. Atau background tertutup oleh background warna. Itu dikarenakan template yang kau gunakan, sudah memakai background warna.

Contoh: Misalkan kau pasang background gambar, tapi pada bab headernya tertutup background warna putih, supaya background warna putih itu hilang dan terganti dengan gambar. Gunakan arahan #Header Atur backgroundnya menjadi transparent;. Seperti ini > #Header { background:transparent; }

Tempatkan arahan #Header { background:transparent; } ibarat cara dari langkah 1-3 diatas. Dibawah ini yaitu kode-kode dari bab blog yang aku tau, mulai dari header, tab, sidebar, hingga footer dan juga kode2 lainnya, yang dapat kau gunakan untuk mengatur background dari halaman blog kamu. Berikut kodenya:

Untuk bab header

#Header { background:transparent; }
.header h1 { background:transparent; }
.body-fauxcolumn-outer .cap-top { background:transparent; }

Untuk bab posting

.post-body { background:transparent; } hanya pada bab goresan pena posting.
.post { background:transparent; } bab posting keseluruhan.
.post-outer { background:transparent; } bab posting hingga keluar
.main-inner { background:transparent; } bab posting dan sidebar
#blog-pager { background:transparent; } pada bab goresan pena beranda, posting lama, posting lebih baru

Untuk bab tab

.tabs-outer .PageList { background:transparent; }

Untuk bab sidebar

.sidebar .widget { background:transparent; } hanya pada bab widgetnya saja.
.sidebar { background:transparent; } seluruh bab sidebar

Bagian footer.

.footer-fauxborder-left { background:transparent; }
.footer-outer { background:transparent; }

kode-kode lainnya, jikalau diperlukan.

.content-outer { background:transparent; } bab halaman blog. dari header hingga ke footer.

.content-inner { background:transparent; } bab halaman blog. dari header hingga ke footer. Untuk mengatur warna goresan pena juga bisa.

.body-fauxcolumn-outer .fauxcolumn-inner { background:transparent; }

.body-fauxcolumn-outer .cap-top .cap-left { background:transparent; }

Makara jikalau ingin memakai background gambar diseluruh bab blog. Cukup memakai satu gambar background pada bab body/content saja, dan yang lainnya di buat menjadi transparent;. Silakan berkreasi sendiri supaya sesuai dengan yang kalian inginkan. Semoga dapat bermanfaat untuk anda.