April 14, 2012

Background Berbeda Warna Untuk Tiap Judul Widget

Situseo Blog : Menggunakan background warna yang berbeda-beda untuk tiap judul widget pada sidebar, mungkin merupakan salah satu cara untuk memperindah desain tampilan blog, terutama untuk bagian judul widget (h2), ini tidak menutup kemungkinan jika kalian menyukai tampilan yang lebih hidup dengan tampilan yang warna-warni, karena sudah terlalu banyaknya desain tampilan yang berwarna redup, terutama untuk desain tampilan Situseo Blog yang Kusam Tanpa Warna.

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, cara ini pada dasarnya sudah pernah saya kupas pada judul Icon Berbeda Pada Setiap Judul Sidebar. Untuk melihat hasilnya apa yang dimaksud dari tulisan ini, bisa lihat contoh hasil background warna berbeda pada setiap judul widget.

Background berbeda untuk 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'/>

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.

Semoga bermanfaat,
Ping your blog, website, or RSS feed for Free Web DirectoryMy Ping in TotalPing.comBloggers - Meet Millions of Bloggers
Protected by Copyscape Duplicate Content Check

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

101011  ©Situseo Blog | Powered by Blogger | Back to Top