Cara mengganti background blog dengan gambar

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

1. Login ke blogger, dari halaman dasbor pilih pengaturan Tata Letak.
2. Dan pilih Desainer template > Tingkat Lanjut > Tambahkan CSS dan masukan kode ini didalamnya.
body {
background: url(http://themes.googleusercontent.com/image?id=1iJBX-a-hBX2tKaDdERpElPUmvb4r5MDX9lEx06AA-UtZIQCYziZg3PFbmOyt-g2sH8Jo) repeat-x fixed top center;}
3. Terapkan ke blog selesai.

Keterangan kode:

• background: url( adalah url dari backgorund gambar yang akan digunakan.
• repeat-x gambar mengulang kesamping. bisa 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 bisa diganti dengan bottom dan center bisa diganti dengan right atau left.
• jika menggunakan backgorund gambar keseluruh bagian blog. gunakanlah ukuran gambar yang besar, contoh: 1400 x 900

Pada dasarnya kode body digunakan untuk mengatur seluruh background blog. Tapi jika tidak bisa jalan ditemplate kamu, coba ganti kode body dengan kode 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 kamu gunakan, sudah menggunakan background warna.

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

Tempatkan kode #Header { background:transparent; } seperti cara dari langkah 1-3 diatas. Dibawah ini adalah kode-kode dari bagian blog yang saya tau, mulai dari header, tab, sidebar, sampai footer dan juga kode2 lainnya, yang bisa kamu gunakan untuk mengatur background dari halaman blog kamu. Berikut kodenya: 

---

 Untuk bagian header

---

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

---

Untuk bagian posting

---

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

---

Untuk bagian tab

---

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

---

Untuk bagian sidebar

---

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

---

Bagian footer.

---

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

---

kode-kode lainnya, jika diperlukan.

---

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

.content-inner { background:transparent; } bagian halaman blog. dari header sampai ke footer. Untuk mengatur warna tulisan juga bisa.

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

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

Jadi jika ingin menggunakan background gambar diseluruh bagian blog. Cukup menggunakan satu gambar background pada bagian body/content saja, dan yang lainnya di buat menjadi transparent;. Silakan berkreasi sendiri agar sesuai dengan yang kalian inginkan. Semoga bisa bermanfaat untuk anda.

Tweet