0 Background Berbeda Warna Untuk Tiap Judul Widget

Jika kalian menyukai warna-warna terang, kalian bisa memulai dengan memberi background warna yang berbeda pada setiap judul widget sidebar atau widget pada bagian lainnya. Untuk memberi background warna yang berbeda untuk tiap judul sidebar, kita harus melakukannya secara manual untuk tiap widget yang akan diberi warna,Untuk melihat hasilnya apa yang dimaksud dari tulisan ini, bisa lihat contoh hasil background warna berbeda pada setiap judul widget.

Dalam contoh gambar diatas, saya menggunakan 3 widget dengan background warna pada judul widget dengan warna berbeda, untuk cara membuatnya, kalian tentukan dulu judul widget mana yang akan diberi background warna, sebagai contoh saya akan menggunakan widget popular post, setelah menentukan widget yang akan diberi background, langkah selanjutnya mencari id dari widget tersebut, seperti dalam kasus saya menggunakan widget popular post, untuk mengetahui id dari widget pupular post caranya masuk Edit HTML dan cari kode ini :

<b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'/>111

Kode yang diberi warna biru merupakan id dari widget popular post, langkah selanjutnya membuat kode css untuk memberi background berbeda pada judul widget, dengan berpatokan dari id widget tersebut, kode css-nya seperti ini :

#PopularPosts1 h2 {
   background:red;
   color:yellow;
...kode css lainnya;
}

Dengan tambahan h2 pada kode css menunjukan heading 2 untuk judul sidebar, selain background dan warna teks, kalian bisa tambahkan border atau style lainnya yang menurut kalian menarik, selamat mencoba.