Cara Membuat Recent Post Slide di Blogger, Lengkap dengan Kode Siap Pakai

Ilustrasi widget recent post slide yang menampilkan artikel terbaru lengkap dengan gambar.

anaksmanda.com - Halo, Sahabat Kreatif Anak Smanda! Pernahkah kalian merasa tampilan blog terlihat datar dan kurang menarik bagi pengunjung? Salah satu cara sederhana untuk mengubahnya adalah memasang recent post slide di Blogger, yaitu widget yang menampilkan artikel terbaru dalam bentuk geser lengkap dengan gambar, judul, dan tanggal terbit. Dengan satu widget ini, halaman depan blog kalian bisa terlihat seperti portal berita yang tertata rapi.

Dalam panduan ini, kita akan membahas cara membuat recent post slider di Blogger dari awal hingga akhir. Kalian akan mendapatkan kode HTML, CSS, dan JavaScript yang siap pakai, penjelasan cara kerja setiap bagian kode, cara menyesuaikan tampilannya, hingga solusi untuk masalah yang paling sering muncul saat pemasangan. Semua langkah bisa dilakukan langsung dari dasbor Blogger tanpa perlu mengedit template utama.

Artikel ini cocok untuk kalian yang baru mengenal Blogger maupun yang sudah lama mengelola blog. Tidak diperlukan kemampuan pemrograman tingkat lanjut, karena setiap baris penting sudah diberi keterangan. Cukup siapkan waktu sekitar lima belas menit, buka dasbor Blogger, lalu ikuti langkah-langkahnya secara berurutan.

Ringkasan Widget Recent Post Slide

Sebelum masuk ke langkah teknis, berikut gambaran singkat tentang komponen yang akan kita pasang dan fungsinya masing-masing:

Apa Itu Recent Post Slide?

Recent post adalah daftar artikel yang paling baru diterbitkan di sebuah blog. Secara bawaan, Blogger sudah menyediakan gadget daftar postingan, tetapi tampilannya biasanya berupa deretan judul yang tersusun ke bawah. Tampilan seperti itu memang fungsional, tetapi kurang menarik perhatian, terutama jika diletakkan di bagian atas halaman.

Recent post slide menyajikan daftar yang sama dalam bentuk yang lebih visual. Setiap artikel ditampilkan sebagai satu slide yang berisi gambar mini (thumbnail), judul, dan tanggal terbit. Slide akan bergeser secara otomatis dalam selang waktu tertentu, dan pengunjung juga dapat menggesernya secara manual menggunakan tombol panah di kiri dan kanan.

Data artikel tidak perlu kalian masukkan satu per satu. Widget ini membaca feed Blogger, yaitu data otomatis yang berisi daftar artikel terbaru beserta informasinya. Setiap kali kalian menerbitkan artikel baru, slider akan langsung menampilkannya tanpa perlu mengubah kode apa pun.

Manfaat Memasang Recent Post Slide di Blog

Widget ini bukan sekadar hiasan. Jika dipasang dengan benar, ada beberapa manfaat nyata yang bisa kalian rasakan:

• Menarik perhatian pengunjung. Gambar yang bergerak lebih cepat tertangkap mata dibandingkan teks biasa, sehingga pengunjung lebih mungkin melihat artikel terbaru kalian.
• Menambah halaman yang dibuka. Ketika pengunjung tertarik pada salah satu slide, mereka akan mengeklik dan membaca artikel lain. Hal ini membantu menurunkan bounce rate dan memperpanjang durasi kunjungan.
• Menghemat ruang. Lima artikel bisa ditampilkan dalam satu kotak yang ringkas, sehingga halaman tidak memanjang ke bawah.
• Memberi kesan profesional. Tampilan slider identik dengan situs berita dan majalah daring, sehingga blog kalian terlihat lebih terkelola dengan baik.

Perlu diingat, manfaat ini hanya terasa jika artikel yang tampil memang berkualitas dan memiliki gambar yang jelas. Slider yang menampilkan gambar buram atau judul yang tidak menarik justru akan membuat pengunjung cepat pergi.

Persiapan Sebelum Memasang Widget

Agar proses pemasangan berjalan lancar, pastikan beberapa hal berikut sudah siap terlebih dahulu:

• Feed blog dalam keadaan aktif. Buka menu Setelan, lalu cari bagian Feed situs. Pastikan opsi Izinkan Feed Blog tidak disetel ke Tidak Ada. Jika feed dimatikan, slider tidak akan menemukan data apa pun.
• Setiap artikel memiliki gambar. Slider mengambil gambar pertama di setiap artikel. Artikel tanpa gambar akan tampil dengan gambar pengganti bertuliskan No Image.
• Alamat blog sudah diketahui. Siapkan alamat lengkap blog kalian, misalnya https://namablog.blogspot.com atau domain khusus yang sudah terhubung.
• Cadangan template. Walaupun kita tidak mengubah template, mencadangkannya melalui menu Tema lalu Cadangkan tetap merupakan kebiasaan yang baik sebelum menambahkan kode apa pun.

Cara Memasang Recent Post Slide di Blogger

Menu Tata Letak di dasbor Blogger, tempat gadget baru ditambahkan.

Setelah persiapan selesai, ikuti langkah-langkah berikut secara berurutan. Prosesnya sama, baik kalian menggunakan komputer maupun peramban di ponsel, hanya letak tombolnya yang sedikit berbeda.

Langkah 1: Masuk ke Dasbor Blogger

Buka situs Blogger.com, lalu masuk menggunakan akun Google yang terhubung dengan blog kalian. Jika kalian mengelola lebih dari satu blog, pilih blog yang ingin dipasangi slider melalui menu di pojok kiri atas.

Langkah 2: Buka Menu Tata Letak

Pada panel sebelah kiri, klik menu Tata Letak (Layout). Halaman ini menampilkan susunan bagian blog, seperti header, area postingan, sidebar, dan footer.

Langkah 3: Tambahkan Gadget Baru

Tentukan lokasi slider. Untuk efek paling terlihat, pilih area di atas postingan utama. Jika ingin lebih sederhana, sidebar juga bisa digunakan. Klik tulisan Tambahkan Gadget pada bagian yang dipilih.

Langkah 4: Pilih Gadget HTML/JavaScript

Pilih gadget HTML/JavaScript dari daftar gadget yang tersedia.

Pada jendela yang muncul, gulir ke bawah hingga menemukan gadget HTML/JavaScript, lalu klik untuk membukanya. Gadget inilah yang akan menampung seluruh kode slider.

Langkah 5: Tempelkan Kode Slider

Isi kolom judul dengan nama yang sesuai, misalnya Artikel Terbaru, atau biarkan kosong jika tidak ingin judul ditampilkan. Setelah itu, salin seluruh kode pada bagian berikutnya dan tempelkan ke kolom Konten. Jangan lupa mengganti alamat blog pada variabel asmBlogUrl.

Langkah 6: Simpan dan Periksa Hasilnya

Klik tombol Simpan di bagian bawah jendela gadget. Kembali ke halaman Tata Letak, lalu buka blog kalian di tab baru. Muat ulang halaman, dan slider seharusnya sudah tampil di lokasi yang kalian pilih.

Kode HTML, CSS, dan JavaScript Recent Post Slide

Berikut kode lengkap yang bisa kalian salin. Kode ini sudah diperbarui dari versi lama: gambar pengganti kini memakai layanan yang masih aktif, dan pemanggilan feed tidak lagi menggunakan document.write, yang sudah tidak disarankan oleh peramban modern.

<!-- ======================================================= -->
<!-- WIDGET RECENT POST SLIDER BY ANAKSMANDA                 -->
<!-- ======================================================= -->
<style type="text/css">
/* Container Utama Slider */
#anaksmanda-slider-wrapper {
  width: 100%;
  max-width: 650px;
  margin: 15px auto;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  background-color: #222;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#anaksmanda-slider-inner {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%;
}

/* Item Slide */
.asm-slide-item {
  min-width: 100%;
  position: relative;
  box-sizing: border-box;
}

.asm-slide-item img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
}

/* Overlay & Text Info */
.asm-slide-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
  padding: 20px 15px 15px 15px;
  color: #ffffff;
  text-align: left;
}

.asm-slide-caption h4 {
  margin: 0 0 5px 0;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
}

.asm-slide-caption h4 a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.2s;
}

.asm-slide-caption h4 a:hover {
  color: #00bcd4;
}

.asm-slide-date {
  font-size: 12px;
  color: #ddd;
}

/* Tombol Navigasi */
.asm-slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  font-size: 20px;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 50%;
  z-index: 10;
  transition: background 0.3s;
}

.asm-slider-btn:hover {
  background: rgba(0,0,0,0.8);
}

.asm-btn-prev { left: 10px; }
.asm-btn-next { right: 10px; }
</style>

<div id="anaksmanda-slider-wrapper">
  <button class="asm-slider-btn asm-btn-prev" onclick="moveAsmSlide(-1)">&#10094;</button>
  <button class="asm-slider-btn asm-btn-next" onclick="moveAsmSlide(1)">&#10095;</button>
  <div id="anaksmanda-slider-inner"></div>
</div>

<script type="text/javascript">
// ==========================================
// PENGATURAN WIDGET SLIDER (SESUAIKAN SINI)
// ==========================================
var asmBlogUrl = "https://www.anaksmanda.com"; // Ganti dengan URL Blog kalian
var asmNumPosts = 5;                           // Jumlah postingan yang ditampilkan
var asmNoImage = "https://placehold.co/600x320?text=No+Image"; 

var currentAsmIndex = 0;
var totalAsmSlides = 0;

function showAnaksmandaRecentSlider(json) {
  var container = document.getElementById("anaksmanda-slider-inner");
  var html = "";
  var entries = json.feed.entry || [];
  totalAsmSlides = entries.length;

  for (var i = 0; i < entries.length; i++) {
    var entry = entries[i];
    var title = entry.title.$t;
    var postUrl = "";
    
    // Mengambil URL Post
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        postUrl = entry.link[k].href;
        break;
      }
    }

    // Mengambil Gambar Thumbnail
    var thumbUrl = asmNoImage;
    if ("media$thumbnail" in entry) {
      thumbUrl = entry.media$thumbnail.url.replace('/s72-c/', '/s600/');
    } else if ("content" in entry) {
      var content = entry.content.$t;
      var imgSearch = content.match(/<img[^>]+src="([^">]+)"/);
      if (imgSearch) {
        thumbUrl = imgSearch[1];
      }
    }

    // Format Tanggal
    var published = entry.published.$t.substring(0, 10);

    html += '<div class="asm-slide-item">';
    html += '<a href="' + postUrl + '"><img src="' + thumbUrl + '" alt="' + title + '"/></a>';
    html += '<div class="asm-slide-caption">';
    html += '<span class="asm-slide-date">' + published + '</span>';
    html += '<h4><a href="' + postUrl + '">' + title + '</a></h4>';
    html += '</div></div>';
  }
  
  container.innerHTML = html;
  
  // Autoplay Slider setiap 5 detik
  setInterval(function() {
    moveAsmSlide(1);
  }, 5000);
}

function moveAsmSlide(direction) {
  var inner = document.getElementById("anaksmanda-slider-inner");
  if (totalAsmSlides === 0) return;
  
  currentAsmIndex += direction;
  if (currentAsmIndex >= totalAsmSlides) {
    currentAsmIndex = 0;
  } else if (currentAsmIndex < 0) {
    currentAsmIndex = totalAsmSlides - 1;
  }
  
  inner.style.transform = "translateX(" + (-currentAsmIndex * 100) + "%)";
}
</script>

<!-- Pemanggilan Feed Blogger -->
<script type="text/javascript">
  var asmFeed = document.createElement('script');
  asmFeed.src = asmBlogUrl + '/feeds/posts/default?alt=json-in-script&max-results=' + asmNumPosts + '&callback=showAnaksmandaRecentSlider';
  document.body.appendChild(asmFeed);
</script>

Cara Kerja Kode Slider

Memahami cara kerja kode akan sangat membantu ketika kalian ingin mengubah tampilan atau mencari penyebab masalah. Secara garis besar, kode di atas terdiri atas empat bagian.

Bagian CSS

Bagian <style> mengatur tampilan. Wadah utama dibatasi lebar maksimal 650 piksel dengan sudut membulat dan bayangan tipis. Setiap slide diberi lebar 100 persen agar hanya satu slide yang terlihat pada satu waktu. Teks judul diletakkan di atas gradasi gelap supaya tetap terbaca walaupun gambarnya terang.

Bagian HTML

Bagian HTML hanya berisi wadah kosong dan dua tombol panah. Wadah anaksmanda-slider-inner nantinya diisi oleh JavaScript. Karena itu, nama ID ini harus sama persis dengan yang dipanggil di dalam skrip.

Bagian JavaScript

Fungsi showAnaksmandaRecentSlider menerima data feed, lalu membaca setiap artikel satu per satu. Dari setiap artikel, skrip mengambil judul, tautan, tanggal terbit, dan gambar. Gambar diambil dari thumbnail bawaan Blogger lalu diperbesar dengan mengganti ukuran s72-c menjadi s600. Jika thumbnail tidak tersedia, skrip mencari tag gambar pertama di dalam isi artikel.

Fungsi moveAsmSlide bertugas menggeser slide. Fungsi ini mengubah posisi wadah menggunakan properti CSS translateX. Ketika slide sudah mencapai urutan terakhir, hitungan kembali ke awal sehingga slider berputar tanpa henti.

Pemanggilan Feed

Bagian terakhir membuat elemen skrip baru yang memanggil alamat feed dengan format json-in-script. Format ini membuat Blogger mengirimkan data sekaligus menjalankan fungsi callback yang sudah kita siapkan. Parameter max-results menentukan jumlah artikel yang diambil.

Cara Menyesuaikan Tampilan Slider

Kode di atas sudah bisa langsung dipakai, tetapi kalian tentu ingin menyesuaikannya dengan warna dan gaya blog. Berikut beberapa bagian yang aman untuk diubah:

• Jumlah artikel. Ubah angka pada asmNumPosts. Nilai tiga sampai lima adalah pilihan yang seimbang antara variasi konten dan kecepatan halaman.
• Kecepatan pergantian. Angka 5000 pada setInterval berarti slide berganti setiap lima detik. Naikkan menjadi 7000 jika pengunjung membutuhkan waktu lebih lama untuk membaca judul.
• Tinggi gambar. Ubah nilai height: 320px pada .asm-slide-item img. Untuk sidebar yang sempit, nilai 200 piksel biasanya sudah cukup.
• Warna aksen. Kode warna #00bcd4 dipakai saat judul disorot. Ganti dengan warna utama blog kalian agar tampilan lebih menyatu.
• Lebar maksimal. Nilai max-width: 650px dapat diperbesar jika slider dipasang di area konten yang lebar.

Setiap kali selesai mengubah kode, simpan gadget lalu periksa hasilnya di halaman blog. Lakukan perubahan sedikit demi sedikit agar kalian mudah mengetahui bagian mana yang menyebabkan tampilan berubah.

Pilihan Lokasi Penempatan Slider

Lokasi pemasangan sangat menentukan seberapa efektif slider bekerja. Setiap area di blog memiliki kelebihan dan kekurangannya sendiri, sehingga kalian perlu menyesuaikannya dengan tujuan yang ingin dicapai.

Di atas postingan utama. Lokasi ini paling mudah terlihat karena langsung muncul ketika halaman dibuka. Cocok untuk blog berita atau blog yang sering menerbitkan artikel baru, karena pengunjung langsung mengetahui konten terkini tanpa perlu menggulir halaman.

Di sidebar. Pilihan ini lebih tenang dan tidak mengganggu fokus pembaca pada isi artikel. Kurangi tinggi gambar dan lebar maksimal agar slider pas dengan lebar sidebar yang biasanya sempit.

Di bawah artikel atau di footer. Slider di bagian ini berfungsi sebagai penawaran bacaan berikutnya setelah pengunjung selesai membaca. Lokasi ini sangat baik untuk menambah jumlah halaman yang dibuka dalam satu kunjungan.

Apa pun pilihannya, cobalah mengamati statistik blog selama satu atau dua minggu setelah pemasangan. Bandingkan jumlah tayangan halaman dan durasi kunjungan sebelum dan sesudahnya. Dari data tersebut, kalian bisa menilai apakah lokasi yang dipilih sudah tepat atau perlu dipindahkan ke area lain.

Masalah yang Sering Muncul dan Solusinya

Berikut beberapa kendala yang paling sering dialami saat memasang widget ini, beserta cara mengatasinya:

Jika slider tetap tidak muncul, buka konsol peramban dengan menekan tombol F12, lalu lihat apakah ada pesan galat berwarna merah. Pesan tersebut biasanya menunjukkan baris kode yang bermasalah sehingga perbaikannya menjadi lebih terarah.

Tips Agar Slider Tidak Memperlambat Blog

Widget yang menarik tidak ada artinya jika membuat blog terasa lambat. Kecepatan halaman juga menjadi salah satu pertimbangan mesin pencari dan berpengaruh pada kenyamanan pengunjung. Perhatikan beberapa hal berikut:

• Batasi jumlah artikel di slider. Setiap slide berarti satu gambar tambahan yang harus diunduh.
• Kompres gambar artikel sebelum diunggah agar ukurannya tidak terlalu besar.
• Jangan memasang lebih dari satu slider di halaman yang sama.
• Tampilkan slider hanya di halaman depan menggunakan kondisi isHomepage seperti pada kotak tips di atas.
• Uji kecepatan blog secara berkala menggunakan PageSpeed Insights setelah menambahkan widget baru.

Blog yang cepat dan rapi juga menjadi nilai tambah ketika kalian ingin mengajukan monetisasi. Jika kalian berencana mendaftar program periklanan, pelajari juga strategi lolos Google AdSense agar tampilan dan konten blog sudah sesuai dengan ketentuannya.

Pertanyaan yang Sering Diajukan

Apakah widget ini bisa dipakai di semua template Blogger?

Bisa. Karena dipasang melalui gadget HTML/JavaScript, widget ini tidak bergantung pada template tertentu. Namun, pada template yang memiliki gaya CSS sangat kuat, kalian mungkin perlu menyesuaikan sedikit ukuran atau warna.

Apakah slider bisa menampilkan artikel dari label tertentu saja?

Bisa. Ubah alamat feed menjadi /feeds/posts/default/-/NamaLabel. Dengan begitu, slider hanya menampilkan artikel yang memiliki label tersebut, misalnya label Tutorial atau Berita.

Apakah widget ini berpengaruh buruk pada SEO?

Tidak secara langsung. Selama jumlah artikel dibatasi dan gambar sudah dikompres, dampaknya terhadap kecepatan halaman cukup kecil. Justru tautan internal di dalam slider membantu pengunjung dan mesin pencari menemukan artikel terbaru kalian.

Apakah slider bisa digeser di layar ponsel?

Kode ini menggunakan tombol panah dan pergantian otomatis, sehingga tetap bisa digunakan di ponsel. Untuk dukungan geser dengan jari, kalian perlu menambahkan fungsi deteksi sentuhan pada JavaScript.

Kesimpulan

Memasang recent post slide di Blogger adalah cara sederhana untuk membuat halaman depan blog terlihat lebih hidup dan profesional. Cukup tambahkan gadget HTML/JavaScript, tempelkan kode, ganti alamat blog, lalu simpan. Slider akan memperbarui dirinya sendiri setiap kali kalian menerbitkan artikel baru.

Agar hasilnya maksimal, pastikan setiap artikel memiliki gambar yang jelas, batasi jumlah slide, dan periksa kecepatan blog secara berkala. Jika kalian mengalami kendala saat pemasangan, silakan tuliskan pertanyaan di kolom komentar. Selamat mencoba, Sahabat Kreatif Anak Smanda!

Rujukan

• Panduan Lengkap Framework Bootstrap untuk Pemula
• Cara Memasang Icon Material Design di Blog AMP
• Panduan Google AdSense: Cara Kerja untuk Pemula
• Strategi Lolos Google AdSense 2026