Cara Membuat Recent Post Keren Versi 3 dengan Tailwind CSS dan Fitur Skeleton Loader
Panduan lengkap memasang widget artikel terbaru yang responsif, modern, dan otomatis memuat gambar menggunakan Blogger Feed API.
Membuat tampilan halaman utama blog terlihat dinamis dan modern adalah kunci utama untuk meningkatkan betahnya pengunjung. Salah satu caranya adalah dengan memasang widget Recent Post (Artikel Terbaru) yang tidak hanya sekadar menampilkan teks, melainkan layout grid bergaya portal berita modern.
Proses penyaringan artikel dilakukan langsung di dalam menu Edit HTML pada Editor Tema XML Blogger.
Pada Recent Post Keren Versi 3 ini, widget dirancang menggunakan utilitas Tailwind CSS. Keunggulannya meliputi sistem *slide-scroll* otomatis di perangkat mobile, tata letak grid 4 kolom di layar komputer, serta efek **Skeleton Loader (efek pulsa abu-abu)** yang menahan tata letak sebelum data artikel asli selesai dimuat oleh JavaScript.
Kelebihan Versi 3 Ini: Layout dibagi menjadi dua baris utama. Baris atas (#news-grid-top) akan menampilkan **4 artikel teratas beserta gambar sampul besarnya**. Sementara baris bawah (#news-grid-bottom) akan menampilkan **4 artikel berikutnya dalam bentuk daftar judul dan ringkasan teks** tanpa gambar.
Salin Kode Widget Lengkap
Di bawah ini adalah kode gabungan yang sudah menyertakan struktur HTML, kerangka *loader*, serta skrip **JavaScript siap pakai**. Klik tombol salin untuk menyalin seluruh baris tanpa ada yang terlewat:
<div class='w-full max-w-7xl mx-auto bg-white p-4 md:p-6 font-sans select-none'>
<div class='flex items-end justify-between border-b-2 border-red-600 pb-1.5 mb-5 w-full font-sans'>
<h2 class='text-xl md:text-2xl font-black text-gray-950 tracking-tight uppercase'>
Trending News
</h2>
<a class='flex items-center gap-1.5 text-xs font-bold text-red-600 tracking-wider uppercase group hover:text-gray-950 transition-colors' href='/p/index-label.html' rel='noopener' target='_blank'>
<span>View All</span>
<svg class='w-3.5 h-3.5 transform transition-transform group-hover:translate-x-1' fill='none' stroke='currentColor' stroke-width='2.5' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
<path d='M13.5 4.5l6 6m0 0l-6 6m6-6H3' stroke-linecap='round' stroke-linejoin='round'/>
</svg>
</a>
</div>
<!-- Grid Atas (Postingan Gambar) -->
<div class='flex flex-row overflow-x-auto snap-x snap-mandatory scrollbar-none gap-4 mb-8 lg:grid lg:grid-cols-4 lg:overflow-x-visible' id='news-grid-top'>
<div class='animate-pulse bg-gray-200 h-[280px] rounded-sm min-w-[85%] sm:min-w-[45%] lg:min-w-0 w-full shrink-0 snap-center'/>
<div class='animate-pulse bg-gray-200 h-[280px] rounded-sm min-w-[85%] sm:min-w-[45%] lg:min-w-0 w-full shrink-0 snap-center'/>
<div class='animate-pulse bg-gray-200 h-[280px] rounded-sm min-w-[85%] sm:min-w-[45%] lg:min-w-0 w-full shrink-0 snap-center'/>
<div class='animate-pulse bg-gray-200 h-[280px] rounded-sm min-w-[85%] sm:min-w-[45%] lg:min-w-0 w-full shrink-0 snap-center'/>
</div>
<hr class='border-gray-200 my-6'/>
<!-- Grid Bawah (Postingan Teks) -->
<div class='flex flex-row overflow-x-auto snap-x snap-mandatory scrollbar-none gap-6 items-start pb-4 md:pb-0 md:grid md:grid-cols-2 lg:grid-cols-4 md:overflow-x-visible w-full' id='news-grid-bottom'>
<div class='animate-pulse space-y-3 min-w-[85%] sm:min-w-[45%] md:min-w-0 w-full shrink-0 snap-center'><div class='h-4 bg-gray-200 w-3/4'/><div class='h-16 bg-gray-200 w-full'/></div>
<div class='animate-pulse space-y-3 min-w-[85%] sm:min-w-[45%] md:min-w-0 w-full shrink-0 snap-center md:block hidden'><div class='h-4 bg-gray-200 w-3/4'/><div class='h-16 bg-gray-200 w-full'/></div>
<div class='animate-pulse space-y-3 min-w-[85%] sm:min-w-[45%] md:min-w-0 w-full shrink-0 snap-center lg:block hidden'><div class='h-4 bg-gray-200 w-3/4'/><div class='h-16 bg-gray-200 w-full'/></div>
<div class='animate-pulse space-y-3 min-w-[85%] sm:min-w-[45%] md:min-w-0 w-full shrink-0 snap-center lg:block hidden'><div class='h-4 bg-gray-200 w-3/4'/><div class='h-16 bg-gray-200 w-full'/></div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Panggil JSON API Blogger untuk mengambil 8 artikel terbaru
fetch("/feeds/posts/default?alt=json&max-results=8")
.then(response => response.json())
.then(data => {
const entries = data.feed.entry || [];
const gridTop = document.getElementById("news-grid-top");
const gridBottom = document.getElementById("news-grid-bottom");
let htmlTop = "";
let htmlBottom = "";
entries.forEach((entry, index) => {
// Ambil judul artikel
const title = entry.title.$t;
// Cari URL link artikel asli
let postUrl = "#";
for (let k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel === "alternate") {
postUrl = entry.link[k].href;
break;
}
}
// Ambil ringkasan isi artikel (Snippet)
const summary = entry.summary ? entry.summary.$t : (entry.content ? entry.content.$t.replace(/<[^>]*>/g, "").substring(0, 100) : "");
if (index < 4) {
// --- KELOMPOK ATAS (DENGAN GAMBAR SAMPUL) ---
let thumbUrl = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu1D1Jc5Y6Xq-H5N3Z0NfK2kG3V6q5A/s1600/no-image.jpg"; // Gambar cadangan jika tidak ada sampul
if (entry.media$thumbnail) {
// Ubah ukuran resolusi thumbnail agar tajam (dari s72-c menjadi w600-h400-c)
thumbUrl = entry.media$thumbnail.url.replace(/\/s72\-c/, "/w600-h400-c");
} else if (entry.content && entry.content.$t.includes("<img")) {
const regex = /<img[^>]+src="([^">]+)"/g;
const match = regex.exec(entry.content.$t);
if (match) thumbUrl = match[1];
}
htmlTop += `
<div class='group relative h-[280px] rounded-md overflow-hidden min-w-[85%] sm:min-w-[45%] lg:min-w-0 w-full shrink-0 snap-center shadow-sm hover:shadow-md transition-shadow duration-300 bg-gray-900'>
<img src="${thumbUrl}" alt="${title}" class='absolute inset-0 w-full h-full object-cover opacity-80 group-hover:scale-105 transition-transform duration-500' loading='lazy'/>
<div class='absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent flex flex-col justify-end p-4'>
<h3 class='text-sm md:text-base font-bold text-white leading-snug line-clamp-2 group-hover:text-red-400 transition-colors'>
<a href="${postUrl}">${title}</a>
</h3>
</div>
</div>
`;
} else {
// --- KELOMPOK BAWAH (HANYA TEKS RINGKASAN) ---
htmlBottom += `
<div class='flex flex-col space-y-1.5 min-w-[85%] sm:min-w-[45%] md:min-w-0 w-full shrink-0 snap-center'>
<h3 class='text-sm font-bold text-gray-950 hover:text-red-600 transition-colors line-clamp-2 leading-snug'>
<a href="${postUrl}">${title}</a>
</h3>
<p class='text-xs text-gray-500 line-clamp-3 leading-relaxed'>
${summary}...
</p>
</div>
`;
}
});
// Suntikkan hasil ke dalam DOM HTML untuk menghapus efek kerangka loading abu-abu
if(htmlTop) gridTop.innerHTML = htmlTop;
if(htmlBottom) gridBottom.innerHTML = htmlBottom;
})
.catch(err => {
console.error("Gagal memuat artikel terbaru:", err);
});
});
</script>Bagaimana Skrip JavaScript Ini Bekerja?
Bagi pemula, penting untuk mengetahui alur logikanya agar mengerti bagaimana widget ini menarik data secara dinamis:
/feeds/posts/default digunakan untuk memanggil data postingan internal blog Anda dalam format JSON secara otomatis tanpa perlu API Key eksternal tambahan.
s72-c). Kode JavaScript di atas memanipulasi string tersebut menjadi w600-h400-c agar gambar tampil tajam dan tidak pecah.
if (index < 4)), sistem memecah alur render: 4 postingan awal dibuat berformat kartu visual, sisa 4 berikutnya dibuang elemen gambarnya untuk efisiensi ruang muat.
.replace(/<[^>]*>/g, "") untuk mencabut paksa kode-kode tag HTML aneh yang ikut terbawa di area ringkasan tulisan agar teks tetap rapi.
Panduan Lengkap Pemasangan Widget di Tema Blogger
Ikuti langkah-langkah mudah berikut untuk menaruh widget ini langsung di tata letak blog Anda:
Masuk ke Menu Tata Letak
Buka akun dashboard Blogger Anda. Pada deretan navigasi samping kiri, klik menu Tata Letak (Layout).
Tambahkan Widget HTML/JavaScript
Cari posisi kolom utama tempat Anda biasa menaruh konten (misal di atas atau di bawah postingan blog utama), klik link + Tambahkan Gadget, lalu temukan dan pilih jenis gadget bernama HTML/JavaScript.
Tempel Kode dan Simpan
Beri judul widget bebas (misalnya: Trending News) atau kosongkan saja. Paste seluruh kode gabungan yang telah Anda salin tadi ke dalam kotak formulir **Konten**. Tekan tombol **Simpan** di bagian bawah gadget, lalu klik tombol **Simpan Ikon Floppy Disk** utama di pojok kanan bawah halaman Tata Letak Blogger.
⚠️ Catatan Penting: Pastikan template Blogger Anda sudah terintegrasi atau memuat framework **Tailwind CSS** (baik via CDN maupun bundler bawaan) agar gaya class utilitas visual seperti animate-pulse, snap-x, dan layout grid-nya dapat merender desain dengan sempurna.
Posting Komentar