Cara Membuat Popular Post Blogger Efek 3D Tanpa jQuery

Widget Popular Posts bawaan Blogger menampilkan artikel yang paling sering dibaca. Artikel ini pertama kali dibuat pada 2012 dengan efek kubus berbasis jQuery. Versi lama tersebut sekarang diganti dengan efek 3D yang lebih ringan karena tidak membutuhkan jQuery atau plugin eksternal.

Versi baru: hanya menggunakan CSS. Lebih ringan, tidak memuat jQuery 1.x, tidak menggunakan script HTTP, dan lebih aman dipasang pada template Blogger modern.

Persiapan Widget Popular Posts

1. Masuk ke Blogger.
2. Buka Tata Letak.
3. Klik Tambahkan Gadget.
4. Pilih Postingan Populer / Popular Posts.
5. Aktifkan thumbnail jika tersedia.
6. Simpan widget.

Kode Efek 3D Popular Posts

Tambahkan CSS berikut melalui Tema → Sesuaikan → CSS Tambahan atau di bagian CSS template Anda.

<style>
/* MonozCore - Popular Posts 3D */
.PopularPosts .widget-content ul{
  margin:0;
  padding:0;
  list-style:none;
  perspective:900px;
}
.PopularPosts .widget-content li{
  position:relative;
  margin:0 0 14px;
  padding:12px;
  border:1px solid rgba(127,127,127,.25);
  border-radius:10px;
  background:var(--popular-3d-bg,rgba(127,127,127,.06));
  transform-style:preserve-3d;
  transition:transform .35s ease,box-shadow .35s ease;
}
.PopularPosts .widget-content li:hover{
  transform:rotateX(4deg) rotateY(-5deg) translateY(-3px);
  box-shadow:0 14px 28px rgba(0,0,0,.18);
}
.PopularPosts .item-thumbnail{
  margin:0 12px 0 0;
}
.PopularPosts .item-thumbnail img{
  width:72px;
  height:72px;
  object-fit:cover;
  border-radius:8px;
  transition:transform .35s ease;
}
.PopularPosts .widget-content li:hover .item-thumbnail img{
  transform:translateZ(18px) scale(1.04);
}
.PopularPosts .item-title{
  font-size:15px;
  line-height:1.45;
}
.PopularPosts .item-title a{
  text-decoration:none;
}
.PopularPosts .item-snippet{
  margin-top:6px;
  font-size:15px;
  line-height:1.5;
  opacity:.82;
}
@media(max-width:600px){
  .PopularPosts .widget-content li:hover{
    transform:translateY(-2px);
  }
}
</style>

Kenapa Versi Ini Lebih Baik?

• Tidak bergantung pada jQuery.
• Tidak menggunakan library lawas.
• Tidak menambahkan request JavaScript eksternal.
• Efek tetap responsif.
• Lebih mudah disesuaikan dengan dark mode.
• Tidak mengubah isi atau data widget Popular Posts.

Mengatur Kekuatan Efek 3D

Bagian utama yang dapat diubah:

transform:rotateX(4deg) rotateY(-5deg) translateY(-3px);

Semakin besar nilai rotateX dan rotateY, semakin kuat efek kemiringannya. Untuk tampilan yang lebih lembut, gunakan nilai sekitar 2–3 derajat.

Mengubah Ukuran Thumbnail

width:72px;
height:72px;

Ubah kedua nilai tersebut dengan ukuran yang sama agar gambar tetap berbentuk kotak.

Jika CSS Tidak Bereaksi

Beberapa template Blogger menggunakan struktur class yang berbeda. Gunakan Inspect Element pada widget Popular Posts untuk memastikan class seperti .PopularPosts, .item-thumbnail, dan .item-title masih digunakan. Jika template mengganti class bawaan, sesuaikan selector tanpa mengubah aturan efeknya.

Tips performa: efek 3D ringan seperti ini sebaiknya hanya aktif saat hover pada desktop. Pada perangkat sentuh, transformasi dibuat lebih sederhana agar tidak mengganggu scrolling.

Versi lama artikel ini menggunakan plugin ImageCube dan jQuery 1.8.3. Kode tersebut sengaja tidak dipertahankan karena terlalu berat untuk fungsi visual yang sekarang dapat dibuat langsung dengan CSS modern.