Merubah Background Sidebar Dengan Warna Yang Berbeda-beda

Keuntungan cara ini adalah kita dapat membuat tampilan gadget yang unik, berbeda setiap gadget . Pada cara ini, ada 3 komponen gadget yang harus diketahui yaitu; Kotak Luar Gadget, Judul Gadget, Isi Gadget. Dari ketiga komponen tersebut, masing-masing dapat diberi background, apakah itu backround warna atau background gambar.

Langkah-langkahnya sebagai berikut;

Kenali terlebih dahulu ID gadget yang akan diubah. Caranya,

• Login ke Blogger.
• Pilih Rancangan.
• Pilih Edit HTML
• Jangan di centang Expand Template Widget biar tidak muncul kode-code yang bejibun..hehehe.

misal kita akan edit pada Gadget Follower, arahkan mouse pada kode HTML template Anda yang paling bawah, disitu akan tampak ID gadget Anda kira-kira seperti ini;

<b:widget id='HTML4' locked='false' title='Artikel Terkait Lainnya' type='HTML'/>
<b:widget id='Label1' locked='false' title='Label' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
<b:widget id='Followers1' locked='false' title='Pengikut' type='Followers'/>
 

yang berwarna merah adalah ID gadget-nya.

Misalkan kita edit backgroun untuk Follower, langkah selanjutnya kita buat Kode CSS untuk memasang background gadget. Buatlah kode seperti  berikut;

#Followers1 {
Background : #009933;
}

#Followers1 h2{
Background : #0000FF;
}

#Followers1 .widget-content{
Background : #FF0000;
} 

Hijau Kode untuk Kotak Luar Gadget
Biru Kode untuk Judul Gadget
Merah Kode untuk Isi Gatget

Ini juga berlaku untuk semua gadget Anda tinggal mengganti ID Gadget.

Jika ingin menggunakan backgroud gambar, silahkan ganti kode warna dengan  kode URL gambar, contoh penulisannya seperti di bawah ini:

#Followers1 {
Background : url(http://URLgambarAnda) no-repeat;
}

#Followers1 h2{
Background : url(http://URLgambarAnda) no-repeat;
}

#Followers1 .widget-content{
Background : url(http://URLgambarAnda) no-repeat;
} 

Jika Anda sudah selesai membuat kodenya, kemudian tempatkan kode tersebut  di atas kode ]]></b:skin>

Langkah Terakhir Klik Simpan Template. dan lihat hasilnya.

NB; Anda bisa berkreasi sesuai dengan keinginan Anda sendiri.

Daftar Isi Lengkap di sini «« klik disini.