Widget Popular Post Blogger dengan Efek Slider Native JavaScript

---

Widget Popular Post merupakan salah satu widget bawaan Blogger yang berguna untuk menampilkan artikel yang paling banyak dilihat. Selain membantu pengunjung menemukan konten menarik, widget ini juga dapat dimanfaatkan untuk mengarahkan pembaca menuju artikel lain yang sudah memiliki performa bagus.

Secara default tampilan Popular Post mengikuti desain template Blogger yang digunakan. Jika ingin membuat tampilannya lebih dinamis, daftar artikel tersebut dapat diberi efek slider sehingga beberapa artikel tampil terlebih dahulu kemudian berganti secara otomatis.

Artikel ini merupakan pembaruan dari widget Popular Post Blogger dengan efek animasi slider CodeFlare versi lama. Engine sebelumnya masih menggunakan plugin jQuery dan script yang sudah di-obfuscate. Pada versi baru ini engine slider ditulis ulang menggunakan native JavaScript sehingga lebih mudah dibaca, diedit dan dikembangkan.

Widget tetap mengambil data langsung dari Popular Posts bawaan Blogger. Jadi kita tidak perlu menggunakan API eksternal, JSON feed atau membuat daftar artikel secara manual.

Informasi Singkat

---

Versi terbaru widget ini menggunakan elemen Popular Post yang sudah dirender Blogger kemudian mengatur pergerakan daftar artikel menggunakan native JavaScript.

Script tidak menentukan artikel mana yang populer. Data dan rentang Popular Post tetap mengikuti konfigurasi widget Blogger pada menu Tata Letak.

Fitur Widget Popular Post Slider

Native JavaScriptTanpa plugin jQuery tambahan.

Auto SliderArtikel berganti secara otomatis.

ResponsiveMenyesuaikan lebar sidebar Blogger.

Multi WidgetDapat membaca lebih dari satu Popular Posts.

Pause InteractionSlider berhenti saat hover atau mendapatkan fokus.

ThumbnailTetap menggunakan gambar bawaan Popular Posts.

Mudah DiaturJumlah item dan interval dapat diedit.

Reduced MotionMenghormati pengaturan animasi perangkat pengguna.

Live Preview

Popular Posts LIVE DATA

Contoh Artikel Popular Post Blogger Nomor Satu

Membuat Widget Blogger Responsive dengan Native JS

Cara Modifikasi Template Blogger dengan Aman

Tips Membuat Blog Lebih Ringan dan Responsive

Widget Blogger Modern untuk Mempercantik Sidebar

AUTO SLIDE Powered by CodeFlare

Contoh di atas hanya menggunakan data dummy untuk live preview. Pada widget sebenarnya, judul, thumbnail dan URL artikel tetap diambil dari widget Popular Posts bawaan Blogger.

Slider bekerja dengan memindahkan artikel pertama ke bagian paling bawah setelah animasi selesai. Dengan metode ini script tidak perlu terus-menerus membuat clone elemen sehingga struktur DOM tetap sederhana.

Widget Popular Post Lainnya :

• √5 Tampilan Style Widget Popular Post Blogger
• Widget Popular Post Blogger Dengan Efek Animasi 3D Cube

DAFTAR ISI

1. Cara Pemasangan Widget Popular Post
2. Cara Pemasangan Kode Slider
3. Pengaturan Widget
4. Troubleshooting

#1 Cara Pemasangan Widget Popular Post

Langkah pertama adalah memastikan widget Popular Posts sudah terpasang pada blog. Jika sudah ada, bagian ini dapat dilewati dan langsung menuju pemasangan kode slider.

Pengaturan artikel yang ditampilkan tetap dilakukan dari widget Popular Posts Blogger. Script slider hanya mengubah cara daftar tersebut ditampilkan.

01

Buka Dashboard Blogger

Login ke Blogger kemudian pilih blog yang ingin dipasang widget.

02

Buka Tata Letak

Pilih menu Tata Letak dan tentukan area sidebar tempat Popular Posts akan ditampilkan.

03

Tambahkan Gadget

Tekan Tambahkan Gadget kemudian pilih Popular Posts.

04

Atur Popular Posts

Pilih periode artikel populer, jumlah artikel dan opsi thumbnail sesuai kebutuhan.

05

Simpan

Simpan konfigurasi kemudian pastikan widget Popular Posts sudah tampil normal sebelum memasang slider.

#2 Cara Pemasangan Kode Slider

Berbeda dengan versi lama, kode slider terbaru tidak perlu dipasang pada gadget HTML/JavaScript yang posisinya harus berada tepat di bawah Popular Posts.

CSS dan JavaScript dapat dipasang langsung pada template sehingga engine akan mencari semua widget dengan class PopularPosts setelah halaman selesai dirender.

Buka Tema → Edit HTML, kemudian pasang kode berikut sebelum tag </body>.

<style>
:root{--cfPpColor:#0083da;}

.cfPpSliderFrame{position:relative;width:100%;overflow:hidden;box-sizing:border-box;transition:height .35s ease;}

.PopularPosts ul.cfPpSlider{position:relative;margin:0!important;padding:0!important;transform:translateY(0);will-change:transform;}

.PopularPosts ul.cfPpSlider.cfPpAnimate{transition:transform .55s cubic-bezier(.4,0,.2,1);}

.PopularPosts ul.cfPpSlider > li{position:relative;box-sizing:border-box;overflow:hidden;}

.PopularPosts ul.cfPpSlider .item-thumbnail img{transition:transform .35s ease,filter .35s ease;}

.PopularPosts ul.cfPpSlider > li:hover .item-thumbnail img{transform:scale(1.06);}

.cfPpSliderFrame:before{content:"";position:absolute;z-index:5;top:0;left:-35%;width:25%;height:2px;background:linear-gradient(90deg,transparent,var(--cfPpColor),transparent);animation:cfPpScan 5s linear infinite;pointer-events:none;}

@keyframes cfPpScan{0%,55%{left:-35%}100%{left:120%}}

@media(prefers-reduced-motion:reduce){
.PopularPosts ul.cfPpSlider.cfPpAnimate{transition:none;}
.PopularPosts ul.cfPpSlider .item-thumbnail img,.cfPpSliderFrame:before{animation:none;transition:none;}
}
</style>

<script>
//<![CDATA[
(function(){
"use strict";

var setting={
  visible:4,
  interval:6000,
  speed:550
};

function outerHeight(el){
  var s=getComputedStyle(el);
  return el.getBoundingClientRect().height+parseFloat(s.marginTop||0)+parseFloat(s.marginBottom||0);
}

function initPopularSlider(ul){
  if(!ul||ul.dataset.cfPpSlider)return;

  var items=ul.children;
  if(items.length<=setting.visible)return;

  ul.dataset.cfPpSlider="1";
  ul.classList.add("cfPpSlider");

  var frame=document.createElement("div");
  frame.className="cfPpSliderFrame";
  ul.parentNode.insertBefore(frame,ul);
  frame.appendChild(ul);

  var timer=null,
      busy=false,
      paused=false;

  function setHeight(){
    var h=0,max=Math.min(setting.visible,ul.children.length);
    for(var i=0;i<max;i++)h+=outerHeight(ul.children[i]);
    frame.style.height=Math.ceil(h)+"px";
  }

  function slide(){
    if(paused||busy||ul.children.length<=setting.visible)return;
    busy=true;

    var first=ul.children[0],move=outerHeight(first);
    ul.classList.add("cfPpAnimate");
    ul.style.transform="translateY(-"+move+"px)";

    setTimeout(function(){
      ul.classList.remove("cfPpAnimate");
      ul.appendChild(first);
      ul.style.transform="translateY(0)";
      setHeight();
      busy=false;
    },setting.speed+30);
  }

  function start(){
    clearInterval(timer);
    timer=setInterval(slide,setting.interval);
  }

  frame.addEventListener("mouseenter",function(){paused=true;});
  frame.addEventListener("mouseleave",function(){paused=false;});
  frame.addEventListener("focusin",function(){paused=true;});
  frame.addEventListener("focusout",function(){paused=false;});

  window.addEventListener("resize",setHeight);

  frame.querySelectorAll("img").forEach(function(img){
    if(!img.complete)img.addEventListener("load",setHeight,{once:true});
  });

  setHeight();
  start();
}

function init(){
  document.querySelectorAll(".PopularPosts .widget-content > ul,.PopularPosts > .widget-content ul").forEach(initPopularSlider);
}

if(document.readyState==="loading"){
  document.addEventListener("DOMContentLoaded",init);
}else{
  init();
}

})();
//]]>
</script>

PENTING

CSS template Blogger berbeda-beda. Engine slider sengaja tidak mengatur ulang seluruh tampilan Popular Posts agar desain dasar widget tetap mengikuti template yang sedang digunakan.

#3 Pengaturan Widget

Tiga pengaturan utama berada pada bagian berikut:

var setting={ visible:4, interval:6000, speed:550 };

visible Jumlah artikel yang terlihat di dalam slider. visible:4

interval Jeda sebelum slider berpindah ke artikel berikutnya dalam milidetik. interval:6000

speed Kecepatan animasi perpindahan artikel. speed:550

Jika ingin menampilkan lima artikel sekaligus dan mengganti artikel setiap delapan detik, ubah menjadi:

var setting={ visible:5, interval:8000, speed:550 };

WARNING

Jangan membuat nilai interval terlalu pendek. Animasi yang bergerak terus-menerus dengan sangat cepat dapat mengganggu pembaca yang sedang melihat sidebar.

#4 Troubleshooting

Slider tidak bergerak

Pastikan jumlah Popular Posts lebih banyak daripada nilai visible. Jika Blogger hanya menampilkan empat artikel dan setting juga empat, tidak ada artikel lain yang perlu digeser.

Popular Post tidak ditemukan

Pastikan widget yang digunakan benar-benar gadget Popular Posts bawaan Blogger dan masih memiliki class PopularPosts.

Tinggi widget kurang tepat

Periksa apakah CSS template memberi margin atau ukuran khusus pada item Popular Posts. Engine menghitung tinggi aktual setiap item, termasuk margin vertikalnya.

Thumbnail tidak bergerak saat hover

Beberapa template menggunakan struktur thumbnail yang berbeda. Slider tetap dapat bekerja walaupun efek hover thumbnail tidak muncul.

Slider berhenti ketika mouse berada di widget

Itu memang fitur widget. Auto slide sengaja dihentikan saat pengguna berinteraksi agar judul artikel tidak berpindah ketika sedang dibaca atau diklik.

Keuntungan terbesar dari engine baru adalah kode tidak lagi bergantung pada jQuery. Script juga tidak lagi mengubah setiap item menjadi kumpulan HTML baru seperti versi sebelumnya, sehingga struktur asli widget Blogger lebih banyak dipertahankan.

Versi lama juga memasukkan tombol Facebook, Twitter, Tumblr, LinkedIn, Pinterest, WhatsApp dan Email langsung ke setiap item. Fitur tersebut sengaja tidak dimasukkan kembali karena fungsi utama widget ini adalah membantu pengunjung menemukan artikel populer, bukan menjadi widget social sharing.

Apabila ingin menambahkan fitur lain seperti nomor ranking, indikator slide, progress bar, random animation atau mode horizontal, engine ini lebih mudah dikembangkan karena source JavaScript sudah terbuka dan tidak di-obfuscate.

CODEFLARE BLOGGER DEVELOPMENT Butuh Widget Blogger Custom?

CodeFlare menerima pembuatan widget Blogger, modifikasi template, perbaikan script dan pembuatan fitur custom sesuai kebutuhan blog.

Hubungi CodeFlare