Popular Posts 3D Cube Blogger dengan Animasi Random 4 Arah

---

Popular Posts memang gadget lama di Blogger, tapi tampilannya nggak harus ikut terasa lama. Dulu saya pernah membuat versi animasi 3D Cube memakai plugin jQuery yang kodenya panjang banget. Sekarang saya rebuild konsep itu dari nol: efek kubusnya tetap ada, tapi engine-nya jauh lebih ringkas karena cukup memakai CSS 3D Transform + vanilla JavaScript.

Versi lama membongkar list Popular Posts, mengambil thumbnail, lalu menjalankannya lewat plugin imagecube. Secara visual menarik, tapi terlalu banyak kode hanya untuk memutar empat gambar. Versi baru tetap memakai data dari gadget Popular Posts native Blogger, lalu enam posting pertama dimasukkan ke empat sisi kubus secara otomatis.

Informasi Singkat

---

Blogger masih memakai menu Tata Letak → Tambahkan Gadget untuk menambah gadget. Efek 3D pada widget ini dibuat dengan CSS perspective, transform-style:preserve-3d, dan rotateY(). JavaScript hanya mengambil data Popular Posts, membuat empat sisi, lalu mengatur rotasinya.

---

Sumber : Blogger Help | MDN CSS 3D

Live Preview Popular Posts 3D Cube Modern

Saya pertahankan karakter kubusnya, tapi tampilannya dibuat lebih bersih: gambar penuh, gradient tipis, dan judul artikel dengan ikon. Tombol previous dan next sekarang berada di dalam gambar pada sisi kiri dan kanan. Rotasi otomatis bergerak random dari atas, bawah, kiri, atau kanan. Preview tetap saya batasi maksimal 350px supaya terasa seperti widget sidebar sungguhan.

Popular Post 3D Cube Modern

Popular Post 3D Cube Modern

Popular Post 3D Cube Modern

Popular Post 3D Cube Modern

Popular Post 3D Cube Modern

Popular Post 3D Cube Modern

Apa yang Saya Ubah dari Versi Lama?

LAMAPlugin jQuery ImageCube

Ratusan baris kode untuk engine rotasi.

BARUVanilla JavaScript

Lebih pendek dan langsung membaca gadget Popular Posts.

LAMADOM direplace

Struktur native dirombak dan bergantung urutan render.

BARUSource tetap aman

Widget native baru disembunyikan setelah cube berhasil dibuat.

Cara Kerja Widget Baru

Popular PostsBlogger menyiapkan data

Vanilla JSAmbil 4 posting

CSS CubeMasuk ke 4 sisi

Auto Rotate4,5 detik

Fitur Widget

CSS 3D asli

Tanpa gambar animasi dan tanpa WebGL.

Auto rotate

Sisi berganti otomatis.

Manual control

Ada tombol next dan previous.

Pause saat hover

Lebih nyaman saat judul sedang dibaca.

Responsive

Maksimal 320px dan mengecil mengikuti layar.

Reduced motion

Transisi dimatikan sesuai preferensi pengguna.

1. Pasang Gadget Popular Posts

Dari dashboard Blogger saya masuk ke Tata Letak, memilih area sidebar, lalu menambahkan gadget Popular Posts. Thumbnail harus aktif karena gambar itulah yang dipakai pada sisi cube.

01Buka Tata LetakPilih area sidebar.

02Tambahkan GadgetPilih Popular Posts.

03Aktifkan thumbnailSupaya setiap sisi punya gambar.

04Tampilkan minimal 4 artikelEmpat posting mengisi empat sisi.

2. Pasang Engine 3D Cube

Setelah Popular Posts aktif, saya tambahkan gadget HTML/JavaScript dan menempelkan kode final di dalamnya. Versi baru tidak lagi bergantung pada plugin eksternal atau jQuery.

Kode Final Popular Posts 3D Cube

Kode berikut sudah mencakup CSS dan JavaScript. Tinggal copy-paste ke gadget HTML/JavaScript.

<style>.cfPopularCube{--cfCubeSize:min(320px,88vw);position:relative;width:var(--cfCubeSize);height:var(--cfCubeSize);margin:22px auto;perspective:1000px}.cfPopularCubeStage{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.2,.75,.25,1)}.cfPopularCubeFace{position:absolute;inset:0;overflow:hidden;border:1px solid rgba(0,131,218,.28);border-radius:10px;background:#101820;box-shadow:0 18px 38px rgba(0,0,0,.2);backface-visibility:hidden}.cfPopularCubeFace:nth-child(1){transform:rotateY(0deg) translateZ(calc(var(--cfCubeSize)/2))}.cfPopularCubeFace:nth-child(2){transform:rotateY(90deg) translateZ(calc(var(--cfCubeSize)/2))}.cfPopularCubeFace:nth-child(3){transform:rotateY(180deg) translateZ(calc(var(--cfCubeSize)/2))}.cfPopularCubeFace:nth-child(4){transform:rotateY(-90deg) translateZ(calc(var(--cfCubeSize)/2))}.cfPopularCubeFace:nth-child(5){transform:rotateX(90deg) translateZ(calc(var(--cfCubeSize)/2))}.cfPopularCubeFace:nth-child(6){transform:rotateX(-90deg) translateZ(calc(var(--cfCubeSize)/2))}.cfPopularCubeFace a{display:block;position:relative;width:100%;height:100%;text-decoration:none}.cfPopularCubeFace img{display:block;width:100%;height:100%;object-fit:cover}.cfPopularCubeFace a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(4,12,18,.92))}.cfPopularCubeMeta{position:absolute;left:15px;right:15px;bottom:16px;z-index:2}.cfPopularCubeMeta strong{display:flex;align-items:flex-start;gap:7px;color:#fff;font-size:15px;line-height:1.45}.cfPopularCubeMeta strong i{margin-top:3px;color:#8cd7ff}.cfPopularCubeNav{position:absolute;top:50%;z-index:6;display:flex;width:38px;height:44px;align-items:center;justify-content:center;padding:0;border:1px solid rgba(255,255,255,.28);background:rgba(5,25,38,.16);color:#fff;cursor:pointer;transform:translateY(-50%);backdrop-filter:blur(5px)}.cfPopularCubeNav i{color:#fff;opacity:.72}.cfPopularCubeNav:hover i{opacity:1}.cfPopularCubePrev{left:0;border-radius:0 7px 7px 0}.cfPopularCubeNext{right:0;border-radius:7px 0 0 7px}.cfPopularCubeNav:hover{background:rgba(0,131,218,.88);border-color:rgba(255,255,255,.55)}.cfPopularCubeDots{position:absolute;left:50%;bottom:7px;z-index:6;display:flex;gap:5px;transform:translateX(-50%)}.cfPopularCubeDots span{display:block;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.38)}.cfPopularCubeDots span.is-active{background:#8cd7ff}@media(prefers-reduced-motion:reduce){.cfPopularCubeStage{transition:none}}</style><script>(function(){"use strict";var source=document.querySelector(".PopularPosts");if(!source||source.dataset.cfCubeReady)return;var rows=[].slice.call(source.querySelectorAll(".widget-content>ul>li,.widget-content li")).filter(function(li){return li.querySelector(".item-title a")});if(!rows.length)return;var data=rows.map(function(li){var a=li.querySelector(".item-title a"),img=li.querySelector(".item-thumbnail img");return{title:(a.textContent||"Popular Post").trim(),url:a.href,img:img?(img.getAttribute("src")||""):""}}).filter(function(x){return x.url});if(!data.length)return;while(data.length<6)data.push(data[data.length%data.length]);data=data.slice(0,6);function thumb(src){if(!src)return "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7M9CSnLtKuLb9cWDkWdVFPwmGFUpWdDnV3S9frV7MJXYXstI3O_xQ0mHBM2kYvApxTGXTeFO0xF5nQPz0VfcfVqL_h8Xg3g66JrGnBLtHkCdxZwQPGsN8VJ5_jCBFgxRruJuE8BIoFQ/s600/No-Image.jpg";return src.replace(/\/s72-c\//,"/s600/").replace(/\/s72\//,"/s600/").replace(/=s72-c$/,"=s600").replace(/=s72$/,"=s600")}var wrap=document.createElement("div");wrap.className="cfPopularCube";wrap.innerHTML='<div class="cfPopularCubeStage"></div><button type="button" class="cfPopularCubeNav cfPopularCubePrev" aria-label="Previous"><i class="fa-solid fa-chevron-left"></i></button><button type="button" class="cfPopularCubeNav cfPopularCubeNext" aria-label="Next"><i class="fa-solid fa-chevron-right"></i></button><div class="cfPopularCubeDots"></div>';var stage=wrap.querySelector(".cfPopularCubeStage"),dots=wrap.querySelector(".cfPopularCubeDots");data.forEach(function(item,i){var face=document.createElement("div");face.className="cfPopularCubeFace";var a=document.createElement("a");a.href=item.url;a.innerHTML='<img alt="" loading="lazy"><div class="cfPopularCubeMeta"><strong><i class="fa-solid fa-fire-flame-curved"></i><span></span></strong></div>';a.querySelector("img").src=thumb(item.img);a.querySelector("img").alt=item.title;a.querySelector("strong span").textContent=item.title;face.appendChild(a);stage.appendChild(face);var d=document.createElement("span");if(i===0)d.className="is-active";dots.appendChild(d)});source.parentNode.insertBefore(wrap,source.nextSibling);source.style.display="none";source.dataset.cfCubeReady="1";var view=0,timer,lastDir="",views=[{x:0,y:0},{x:0,y:-90},{x:0,y:-180},{x:0,y:90},{x:-90,y:0},{x:90,y:0}],dirs=["left","right","up","down"];function draw(){var v=views[view];stage.style.transform="translateZ(calc(var(--cfCubeSize)/-2)) rotateX("+v.x+"deg) rotateY("+v.y+"deg)";[].forEach.call(dots.children,function(d,i){d.classList.toggle("is-active",i===view)})}function rand(){var d=dirs[Math.floor(Math.random()*dirs.length)];if(d===lastDir)d=dirs[(dirs.indexOf(d)+1)%dirs.length];lastDir=d;return d}function auto(){var d=rand();if(d==="left")view=view<4?(view+1)%4:1;else if(d==="right")view=view<4?(view+3)%4:3;else if(d==="up")view=4;else view=5;draw()}function restart(){clearInterval(timer);timer=setInterval(auto,4500)}function move(n){if(view>3)view=0;view=(view+n+4)%4;draw();restart()}wrap.querySelector(".cfPopularCubePrev").addEventListener("click",function(){move(-1)});wrap.querySelector(".cfPopularCubeNext").addEventListener("click",function(){move(1)});wrap.addEventListener("mouseenter",function(){clearInterval(timer)});wrap.addEventListener("mouseleave",restart);document.addEventListener("visibilitychange",function(){document.hidden?clearInterval(timer):restart()});draw();restart()})();</script>

Catatan: engine membaca selector native .PopularPosts, .item-title, dan .item-thumbnail. Template yang merombak markup Popular Posts bisa membutuhkan penyesuaian selector.

Kenapa Versi Baru Lebih Ringan?

ENGINEVanilla JS

Tanpa dependency tambahan.

ANIMASICSS transform

Tidak mengubah layout setiap frame.

IMAGE6 thumbnail

Enam sisi kubus memakai enam thumbnail Popular Posts.

MOTIONReduced-motion ready

Lebih ramah aksesibilitas.

Mengubah Ukuran Cube

Ukuran default maksimal 320px supaya nyaman untuk sidebar sekitar 320–350px. Kalau ingin lebih kecil, cukup ubah variabel berikut.

.cfPopularCube{--cfCubeSize:min(280px,88vw)}

Kalau 3D Terlalu Ramai

5 Style Popular Posts BloggerAlternatif modern tanpa efek 3D.Popular Posts SliderAlternatif animasi model slider.

Saya tetap suka versi Cube karena punya karakter yang beda dari widget sidebar biasa. Bedanya sekarang efek itu nggak lagi dibayar dengan plugin jQuery ratusan baris. Kodenya lebih mudah dibaca, lebih gampang dirawat, dan tampilannya tetap punya identitas.

POPULAR POSTS 3D CUBEEfek lama, engine baru.

Konsep 3D Cube tetap dipertahankan, tapi implementasinya sekarang lebih ringan, responsive, dan lebih cocok untuk template Blogger modern.