Cara Membuat Atau Memberi Efek Latar Gradasi Warna-Warni Pada Daftar Artikel Populer Blog

Sobat Blogger, sebenarnya sudah cukup lama saya ingin berbagi trik ini dengan Sobat sekalian. Namun, dikarenakan keterbatasan waktu dan tenaga, akhirnya saya baru dapat menyusun artikel ini dan kemudian menerbitkannya. Oke, bila dalam artikel sebelumnya yang berjudul ‘Cara Menambahkan Efek Hover Warna Latar Gradasi Pada List Item Entri Populer Blog’ telah saya uraikan cara yang digunakan untuk memberikan efek warna tertentu yang akan ditampilkan ketika daftar artikel disorot dengan menggunakan mouse pointer, maka dalam artikel ini akan saya uraikan tentang cara menambahkan efek warna-warni pada background list item daftar artikel populer (dalam hal ini adalah seperti yang tampak pada gambar di atas).

Menambahkan efek berwarna pada background entri populer sebenarnya bukanlah suatu hal yang baru, karena menurut sepengetahuan saya telah ada banyak tutorial yang menguraikan tentang hal tersebut. Namun demikian (masih menurut sepengetahuan saya), tutorial yang menyajikan tentang hal tersebut rata-rata adalah tutorial yang menguraikan cara membuat daftar artikel warna-warni dengan memanfaatkan gambar sebagai background. Padahal seperti yang kita tahu bersama bahwasanya penggunaan gambar yang berlebih dapat mengakibatkan lambatnya penayangan halaman, terutama apabila sambungan atau bandwidth internet yang dipakai oleh pengguna tidak terlalu tinggi.

Nah, oleh sebab itulah saya rasa tidak ada salahnya bila kita menggunakan trik CSS untuk membuat list item berwarna, karena dengan cara ini bisa jadi tidak akan memperberat penayangan halaman walau sambungan atau bandwidth internet yang dipakai oleh pengguna tidak terlalu tinggi sekalipun.

Untuk keperluan ini caranya tidaklah terlalu rumit. Anda dapat melakukannya secara mudah, yaitu dengan cara mengerjakan langkah-langkah berikut ini secara berurutan.

Pertama, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’.

Kedua, tambahkan CSS berikut ini dalam area skin. Atau untuk lebih mudahnya cari ]]></b:skin> dan kemudian sisipkan CSS berikut ini tepat di atasnya.

.PopularPosts .widget-content ul li,
.PopularPosts .widget-content ul li+li+li,
.PopularPosts .widget-content ul li+li+li+li+li,
.PopularPosts .widget-content ul li+li+li+li+li+li+li,
.PopularPosts .widget-content ul li+li+li+li+li+li+li+li+li{
  background: #EBFFF5;
  background: -moz-linear-gradient(left center , #EBFFF5 0%, #FFF0F0 50%, #FFF0F0 0%, #EBFFF5 100%);
  background: -webkit-linear-gradient(left, #EBFFF5 0%,#FFF0F0 50%,#FFF0F0 0%,#EBFFF5 100%);
  background: -o-linear-gradient(left, #EBFFF5 0%,#FFF0F0 50%,#FFF0F0 0%,#EBFFF5 100%);
}

.PopularPosts .widget-content ul li+li,
.PopularPosts .widget-content ul li+li+li+li,
.PopularPosts .widget-content ul li+li+li+li+li+li,
.PopularPosts .widget-content ul li+li+li+li+li+li+li+li,
.PopularPosts .widget-content ul li+li+li+li+li+li+li+li+li+li{
  background: #FAFFFF;
}

Keterangan:

Rangkaian CSS yang pertama digunakan untuk memberi warna pada list item dengan urutan ganjil, sedangkan rangkaian yang kedua dipakai untuk memberi warna pada list item urutan genap.

Ketiga, simpan template.

Lantas bagaimana jika kita ingin menambahkan efek seperti di atas pada daftar artikel lainnya atau dengan hanya menggunakan dua buah warna yang berbeda? Anda dapat melakukannya dengan cara menggunakan CSS yang serupa dengan CSS di atas, dalam hal ini adalah dengan cara menentukan setelan untuk ID atau Class terdekat dari list item yang akan diberi warna latar selang-seling.

Sebagai contoh misalnya adalah efek warna latar selang-seling yang digunakan pada daftar artikel terkait blog ini. Jika diperhatikan maka warna background yang digunakan sangatlah berbeda dengan warna yang dipakai pada daftar artikel populer, karena bagian tersebut memang menggunakan CSS yang berbeda. Dalam hal ini CSS yang digunakan untuk bagian tersebut (daftar artikel terkait) adalah sebagai berikut.

.web-related-posts-area ul li,
.web-related-posts-area ul li+li+li,
.web-related-posts-area ul li+li+li+li+li,
.web-related-posts-area ul li+li+li+li+li+li+li,
.web-related-posts-area ul li+li+li+li+li+li+li+li+li {
  background: #eeeeee;
}

.web-related-posts-area ul li+li,
.web-related-posts-area ul li+li+li+li,
.web-related-posts-area ul li+li+li+li+li+li,
.web-related-posts-area ul li+li+li+li+li+li+li+li,
.web-related-posts-area ul li+li+li+li+li+li+li+li+li+li {
  background: #fafafa;
}

Dapat dilihat pada CSS di atas bahwasanya class yang digunakan adalah .web-related-posts-area, karena memang class inilah yang terdekat dengan list item untuk daftar artikel terkait. Sehingga bila diterapkan pada blog yang Anda kelola, maka tentu saja bagian tersebut harus disesuaikan terlebih dulu dengan class terdekat yang dipakai untuk list item yang akan diganti warna latarnya. Dan dapat dilihat pula bahwa dalam kode CSS di atas hanya menggunakan 2 (dua) macam kode warna untuk background, karena kode CSS di atas memang hanya digunakan untuk membuat background dengan menggunakan 2 (dua) buah warna solid yang berbeda sehingga akhirnya menghasilkan tampilan seperti yang tampak pada gambar di bawah ini.

Nah, bagaimana, tidak sulit bukan? Selamat mencoba untuk menerapkannya pada blog yang Anda kelola. Dan apabila Anda mengalami kendala atau kesulitan dalam mengimplementasikannya, maka silakan ajukan pertanyaan tentang kendala atau kesulitan yang Anda alami dengan cara mengeposkan komentar dalam artikel ini.

Semoga berguna dan bermanfaat.
Salam.