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'/><br /> <b:widget id='Label1' locked='false' title='Label' type='Label'/><br /> <b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/><br /> <b:widget id='Followers1' locked='false' title='Pengikut' type='Followers'/>

code HTML4.LABEL1,BLOGARCHIVE1,FOLLOWERS1 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 {<br /> Background : #009933;<br /> }<br /> <br /> #Followers1 h2{<br /> Background : #0000FF;<br /> }<br /> <br /> #Followers1 .widget-content{<br /> Background : #FF0000;<br /> } <br /> <br /> #009933 Kode untuk Kotak Luar Gadget<br /> #0000FF Kode untuk Judul Gadget<br /> #FF0000 Kode untuk Isi Gatget<br /> <br /> berlaku untuk semua gadget Anda tinggal mengganti ID Gadget.<br /> Jika ingin menggunakan backgroud gambar, silahkan ganti kode warna dengan kode URL gambar,<br /> contoh penulisannya seperti di bawah ini:<br /> <br /> #Followers1 {<br /> Background : url(http://URLgambarAnda) no-repeat;<br /> }<br /> <br /> #Followers1 h2{<br /> Background : url(http://URLgambarAnda) no-repeat;<br /> }<br /> <br /> #Followers1 .widget-content{<br /> 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.