Cara Membuat Background Wiget || Berwarna

Secara default, Blogger tidak memberi fasilitas untuk memberi warna lain selain putih untuk latar judul widget.

Jika Anda ingin memberi warna pada backgroung judul widget sehingga menjadi terlihat lebih menarik dan blog Anda terlihat cantik, maka inilah yang perlu Anda lakukan:

1. Anda login ke Blogger.
2. Kemudian di Dashboard, Anda klik Template
3. Klik Edit HTML
4. Anda cari kode ]]></b:skin> jika kesulitan mencarinya, coba Anda tekan Ctrl + F pada keyboard kemudian tuliskan kode di atas pada kotak pencarian yang muncul.
5. Jika kode ]]></b:skin> sudah diketemukan, copy paste kode di bawah ini di atas kode tersebut:

.sidebar h2 {

background:#009900;

color: #ffffff;

margin: 0px 0px 8px 0px;

box-shadow: 0 0 0 4px #009900, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);

border-radius: 3px;

-moz-border-radius: 1px;

-webkit-border-radius: 1px;

text-align:center;

Keterangan: yang berwarna biru pada kode HTML di atas bisa Anda ubah sesuai selera. Background yang saya gunakan adalah warna hijau (#009900). Kemudian perataan teks judul widget adalah: center atau di tengah-tengah. Ini bisa Anda ganti dengan warna lain dan perataan teks di kiri atau kanan.

Jika sudah, silakan klik save atau simpan perubahan. Silakan lihat hasilnya. Jika berhasil, harusnya tampak seperti ini:

Jika Anda ingin sudut kotak latar judl widget ini lancip tidak melengkung, coba buang bagian:

border-radius: 3px;

-moz-border-radius: 1px;

-webkit-border-radius: 1px;

pada kode di atas. 

Juga bila menginginkan kotak tersebut tanpa shadow/bayangan, buang bagian:

box-shadow: 0 0 0 4px #009900, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);

Cara Membuat Background Footer widget dibawah blog berwarna

Ikuti langkah-langkah dibawah ini.

1. Login ke dasbor Blogger.
2. Pilih pengaturan template dan klik edit html.
3. Klik cadangkan/pulihkan dan unduh template blog, untuk jaga-jaga. klo terjadi eror kamu bisa mengembalikannya lagi kesemula.
4. Selanjutnya Klik Edit Html dan Cari kode h2 { . Lengkapnya seperti dibawah ini.
/* Headings
----------------------------------------------- */
h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}
5. Tambahkan kode background:#2288BB; padding:4px 15px 3px;text-transform:none;
6. Jadi kode lengkapnya seperti ini.
/* Headings
----------------------------------------------- */
h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);background:#2288BB;
  padding:4px 15px 3px;text-transform:none;
}
7. Ganti kode #2288BB; dengan kode warna yang kamu inginkan. 
8. Setelah itu coba di Preview / pratinjau template kamu. Jika sudah berubah warna background judul sidebar kamu. Baru di Save.
9. Jika Belum, Coba dilihat lagi kode warnanya, background:#2288BB; Pastikan Kode ini " ; " ada dibelakang kode warna(tanpa tanda ""), jika kode itu hilang maka warna tidak akan berubah. Selesai.

Oke silakan dicoba dan semoga berhasil.