Modifikasi Tampilan Background Judul Widget Berbeda Warna

Modifikasi Tampilan Background Judul Widget Berbeda Warna - Judul widget biasanya memiliki tag <h2> (heading 2) baik widget untuk sidebar, footer atau widget-widget pada lokasi lainnya jika kita menempatkannya melalui Element
Widget Blogger dan pada umumnya memiliki tampilan yang sama antar judul widget karena hanya diatur melalui tag h2, untuk mempunyai tampilan yang berbeda antar tiap judul widget (heading widget) baik background warna/gambar, teks atau style-style lainnya, kita bisa modifikasi tampilan tersebut dengan cara manual (satu persatu) dari tiap widget tersebut.

Untuk setiap widget yang dipergunakan biasanya memiliki selektor id (#) dengan nama dari masing-masing widget blogger yang dipergunakan, sebagai contoh Widget Popular Posts yang sudah umum dipergunakan pada web atau blog, widget popular posts mempunyai nama selektor id PopularPosts1 dan untuk widget blogger lainnya tentunya mempunyai nama id yang berbeda disesuiakan dengan widget yang dipergunakan, berbeda dengan widget dari pihak luar atau kita membuat sendiri widget tersebut, untuk penamaan id dari widget pihak luar akan mempunyai nama id berupa HTML1, HTML2 dan seterusnya.

Menentukan Nama ID Widget

Bagaimana kita menentukan nama id dari masing-masing widget yang dipergunakan? coba kita masuk pada edit template pada menu blogger, dan saya asumsikan belum mengetahui nama id dari widget popular posts.

Ketika kita menambah sebuah widget dari blogger melalui Menu Layout Blogger dengan meng-klik Add Gadget, kita akan dihadapkan pada list dari widget-widget dari blogger, dari sekian list yang ada kita memilih Popular post (contoh), dari widget popular post tersebut kita bisa menyeting tampilannya, pada form title secara default akan terisi nama Entri Populer (kita bisa ubah dengan nama yang sesuai) dengan berpatokan pada nama title kita bisa mengetahui nama id dari popular posts, begitupun jika kita menggunakan widget dari pihak luar blogger kita bisa mencantumkan nama title untuk mengetahui nama id widget tersebut, sebagai contoh nama id dari widget popular post dan widget dari pihak luar:

<b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'/> /* element widget popular post */

<b:widget id='HTML2' locked='false' title='Komentar Terbaru' type='HTML'/> /* element widget pihak luar */

Untuk mengetahui script tersebut kita masuk pada menu Edit Template, dengan berpatokan pada nama title widget kita bisa mengetahui nama id widget popular posts yaitu PopularPosts1 dan id widget dari pihak luar adalah HTML2 seperti tertulis pada element diatas.

Setelah mengetahui nama id widget tersebut, tentunya kita mendesain tampilan title widget dengan style-style yang kita sesuaikan sendiri, sebagai contoh mengganti background title widget untuk popular post berwarna biru, selanjutnya kita buatkan CSS-nya menjadi seperti ini:

CSS

#PopularPosts1 h2 {
   background: blue;
   /* tambahkan style lainnya yang kalian suka */
   }

begitupun untuk widget lainnya:

#HTML2 h2 {
   background: red;
   /* tambahkan style lainnya yang kalian suka */
   }

Letakan css tersebut dibawah <b:skin><![CDATA[ atau diatas ]]></b:skin> dan save template

Sangat manual, tapi dengan cara ini sangat baik untuk memberikan style yang berbeda-beda untuk sebuah title widget.