Cara Membuat Popular Posts Warna-Warni di Blogger dengan CSS

Widget Popular Posts bawaan Blogger bisa dibuat lebih menarik tanpa JavaScript. Versi lama artikel ini membawa banyak CSS legacy, prefix browser lama, dan form Add to Blogger. Versi baru cukup memakai CSS modern.

Persiapan

1. Buka Tata Letak.
2. Tambahkan gadget Postingan Populer.
3. Tentukan jumlah artikel yang ingin ditampilkan.
4. Simpan.

CSS Popular Posts Warna-Warni

<style>
.PopularPosts .widget-content ul{
  list-style:none;
  margin:0;
  padding:0;
}
.PopularPosts .widget-content li{
  margin:0 0 8px;
  padding:11px 12px;
  border-radius:9px;
  font-size:15px;
  line-height:1.45;
  transition:transform .2s ease,box-shadow .2s ease;
}
.PopularPosts .widget-content li:nth-child(6n+1){background:#fde2e2}
.PopularPosts .widget-content li:nth-child(6n+2){background:#e2f0fd}
.PopularPosts .widget-content li:nth-child(6n+3){background:#e5f6df}
.PopularPosts .widget-content li:nth-child(6n+4){background:#fff2cc}
.PopularPosts .widget-content li:nth-child(6n+5){background:#eee5ff}
.PopularPosts .widget-content li:nth-child(6n){background:#ffe7d6}
.PopularPosts .widget-content li:hover{
  transform:translateX(4px);
  box-shadow:0 6px 16px rgba(0,0,0,.10);
}
.PopularPosts .item-title a{
  color:#222;
  text-decoration:none;
}
.PopularPosts .item-snippet{
  color:#444;
  opacity:.85;
}
</style>

Versi Dark Mode

Jika template Anda memiliki class dark mode pada body, tambahkan override sesuai class template. Contoh:

body.dark .PopularPosts .widget-content li{
  filter:brightness(.72) saturate(.85);
}
body.dark .PopularPosts .item-title a,
body.dark .PopularPosts .item-snippet{
  color:#fff;
}

Kenapa Tidak Perlu JavaScript?

• :nth-child() sudah cukup untuk memberi warna bergantian.
• Tidak perlu menunggu script berjalan.
• Tidak menambah request eksternal.
• Lebih kecil risiko bentrok dengan template.

Catatan: selector widget dapat berbeda pada template Blogger custom. Jika warna tidak muncul, inspect elemen Popular Posts dan sesuaikan selector tanpa mengubah konsep CSS-nya.