Tutorial Lengkap: Cara Memasang Widget Feed Category Scroll Horizontal di Blogger & WordPress
Memiliki tampilan website atau blog yang rapi, modern, dan interaktif adalah impian setiap pemilik situs. Salah satu elemen visual yang saat ini sangat populer di media berita maupun blog profesional adalah Widget Feed Per Kategori dengan Fitur Horizontal Scroll (Geser Kiri/Kanan).
Widget ini tidak hanya mempercantik tata letak (layout) blog Anda, tetapi juga terbukti meningkatkan user engagement (keterlibatan pengunjung). Pengunjung dapat dengan mudah menjelajahi berbagai topik tanpa harus menguras area layar ke bawah (page scrolling yang terlalu panjang).
Bagi Anda pembaca setia Warkasa1919.com, kali ini kita akan membedah secara tuntas tata cara pemasangan kode widget feed interaktif ini di dua platform blogging terbesar: Blogger (Blogspot) dan WordPress.
Artikel ini dirancang tahap demi tahap agar ramah bagi pemula sekalipun (no-code/low-code friendly). Yuk, simak panduan lengkapnya!
Mengapa Anda Harus Menggunakan Widget Feed Scroll Horizontal?
Sebelum masuk ke teknis pemasangan, mari kita pahami beberapa alasan utama mengapa widget ini sangat berguna untuk blog Anda:
Hemat Ruang Halaman (Space-Saving Layout): Menampilkan puluhan artikel dari belasan kategori biasanya membutuhkan halaman yang sangat panjang. Dengan fitur horizontal scroll, Anda bisa menampung 6 hingga 10 artikel per kategori dalam satu baris kotak yang ringkas.
Navigasi Mobile-Friendly: Di era smartphone, pengguna sangat terbiasa dengan gerakan menggeser (swiping) layar ke samping seperti di aplikasi Instagram atau Netflix. Widget ini memberikan pengalaman serupa di situs Anda.
Meningkatkan Pageviews & Menurunkan Bounce Rate: Kemudahan menjelajah artikel berdasarkan topik kesukaan akan memancing pengunjung untuk mengklik lebih banyak halaman di situs Anda.
Ringan dan Responsif: Kode yang digunakan sudah dioptimalkan dengan CSS Grid/Flexbox modern dan sistem pemanggilan data asinkron (JSON feed), sehingga tidak memberatkan kecepatan load website.
Tahap 1: Persiapan Kode Widget
Berikut adalah paket kode gabungan (HTML, CSS, dan JavaScript) yang siap dipakai. Kode ini telah dilengkapi dengan efek skeleton loading (animasi saat memuat data) dan desain card modern.
Master Kode Widget Feed Warkasa1919
<!-- Warkasa1919 Feed Sections - Horizontal Scroll Version -->
<div class="w19-page-wrapper">
<div class="w19-sections-grid" id="w19PageGrid">
<!-- Skeleton Loading Effect -->
<div class="w19-skeleton-card"></div>
<div class="w19-skeleton-card"></div>
<div class="w19-skeleton-card"></div>
<div class="w19-skeleton-card"></div>
</div>
</div>
<style>
/* Reset & Scope Isolation */
.w19-page-wrapper {
font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
width: 100% !important;
max-width: 1080px !important;
margin: 20px auto !important;
padding: 0 10px !important;
box-sizing: border-box !important;
}
.w19-page-wrapper * {
box-sizing: border-box !important;
}
/* Main Grid Container */
.w19-sections-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 24px !important;
}
@media (min-width: 640px) {
.w19-sections-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* Outer Box per Label */
.w19-label-box {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 18px !important;
padding: 18px !important;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05) !important;
display: flex !important;
flex-direction: column !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
overflow: hidden !important;
}
.w19-label-box:hover {
transform: translateY(-3px) !important;
border-color: #2563eb !important;
box-shadow: 0 15px 30px -5px rgba(37, 99, 235, 0.12) !important;
}
/* Header Label Area */
.w19-label-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding-bottom: 12px !important;
margin-bottom: 14px !important;
border-bottom: 2px solid #f1f5f9 !important;
}
.w19-label-title {
font-size: 16px !important;
font-weight: 800 !important;
color: #0f172a !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
text-transform: capitalize !important;
line-height: 1.2 !important;
}
.w19-label-title::before {
content: '' !important;
display: inline-block !important;
width: 8px !important;
height: 18px !important;
background: #2563eb !important;
border-radius: 4px !important;
}
.w19-label-more {
font-size: 12px !important;
font-weight: 700 !important;
color: #2563eb !important;
text-decoration: none !important;
background: #eff6ff !important;
padding: 4px 10px !important;
border-radius: 20px !important;
transition: background 0.2s ease !important;
}
.w19-label-more:hover {
background: #2563eb !important;
color: #ffffff !important;
text-decoration: none !important;
}
/* Horizontal Scroll Container */
.w19-posts-container {
display: flex !important;
flex-direction: row !important;
gap: 12px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x mandatory !important;
-webkit-overflow-scrolling: touch !important;
padding-bottom: 8px !important;
}
/* Custom Scrollbar */
.w19-posts-container::-webkit-scrollbar {
height: 6px !important;
}
.w19-posts-container::-webkit-scrollbar-track {
background: #f1f5f9 !important;
border-radius: 10px !important;
}
.w19-posts-container::-webkit-scrollbar-thumb {
background: #cbd5e1 !important;
border-radius: 10px !important;
}
.w19-posts-container::-webkit-scrollbar-thumb:hover {
background: #2563eb !important;
}
/* Post Card Styling */
.w19-post-card {
flex: 0 0 180px !important;
scroll-snap-align: start !important;
display: flex !important;
flex-direction: column !important;
text-decoration: none !important;
color: #0f172a !important;
border-radius: 12px !important;
overflow: hidden !important;
background: #f8fafc !important;
border: 1px solid #edf2f7 !important;
transition: all 0.25s ease !important;
}
.w19-post-card:hover {
background: #ffffff !important;
border-color: #2563eb !important;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06) !important;
}
.w19-thumb-wrapper {
width: 100% !important;
aspect-ratio: 16 / 9 !important;
background-color: #e2e8f0 !important;
overflow: hidden !important;
position: relative !important;
}
.w19-thumb-img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transition: transform 0.4s ease !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
}
.w19-post-card:hover .w19-thumb-img {
transform: scale(1.08) !important;
}
.w19-post-details {
padding: 10px !important;
display: flex !important;
flex-direction: column !important;
flex-grow: 1 !important;
}
.w19-post-title {
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
color: #0f172a !important;
margin: 0 0 6px 0 !important;
padding: 0 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
word-break: break-word !important;
}
.w19-post-date {
font-size: 10.5px !important;
color: #64748b !important;
margin-top: auto !important;
}
/* Skeleton Loading */
.w19-skeleton-card {
background: #e2e8f0;
border-radius: 16px;
height: 180px;
animation: w19Pulse 1.5s infinite ease-in-out;
}
@keyframes w19Pulse {
0% { opacity: 0.5; }
50% { opacity: 1; }
100% { opacity: 0.5; }
}
</style>
<script>
(function() {
// 1. GANTI DOMAIN INI DENGAN ALAMAT BLOG ANDA
const domain = "https://www.warkasa1919.com";
// 2. SESUAIKAN KATEGORI / LABEL DENGAN KATEGORI DI BLOG ANDA
const labels = [
"Berita", "Teknologi", "Pendidikan", "Kesehatan",
"Inspirasi", "Lingkungan", "Tutorial", "Gadget"
];
// 3. JUMLAH POSTINGAN PER KATEGORI
const postsPerLabel = 6;
const mainGrid = document.getElementById("w19PageGrid");
const defaultThumb = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='169' viewBox='0 0 300 169'%3E%3Crect width='300' height='169' fill='%231e293b'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%2394a3b8' font-family='sans-serif' font-size='12'%3EWarkasa1919%3C/text%3E%3C/svg%3E";
function formatDate(str) {
const d = new Date(str);
return d.toLocaleDateString('id-ID', { year: 'numeric', month: 'short', day: 'numeric' });
}
function getThumbnail(entry) {
if (entry.media$thumbnail) {
return entry.media$thumbnail.url.replace('/s72-c/', '/w500-h281-p-k-no-nu/');
} else if (entry.content && entry.content.$t) {
const imgMatch = entry.content.$t.match(/<img[^>]+src="([^">]+)"/);
if (imgMatch) return imgMatch[1];
}
return defaultThumb;
}
function fetchLabelPosts(label) {
return new Promise((resolve) => {
const scriptUrl = `${domain}/feeds/posts/summary/-/${encodeURIComponent(label)}?alt=json-in-script&max-results=${postsPerLabel}`;
const script = document.createElement('script');
const callbackName = 'w19_pg_cb_' + Math.random().toString(36).substring(2, 9);
window[callbackName] = function(data) {
delete window[callbackName];
if (document.head.contains(script)) document.head.removeChild(script);
let posts = [];
if (data.feed && data.feed.entry && data.feed.entry.length > 0) {
posts = data.feed.entry.map(entry => {
let link = "";
for (let i = 0; i < entry.link.length; i++) {
if (entry.link[i].rel === 'alternate') {
link = entry.link[i].href;
break;
}
}
return {
title: entry.title.$t,
url: link,
date: formatDate(entry.published.$t),
image: getThumbnail(entry)
};
});
}
resolve({ label: label, posts: posts });
};
script.src = `${scriptUrl}&callback=${callbackName}`;
script.onerror = () => resolve({ label: label, posts: [] });
document.head.appendChild(script);
});
}
async function initPageWidget() {
const promises = labels.map(label => fetchLabelPosts(label));
const results = await Promise.all(promises);
if (mainGrid) {
mainGrid.innerHTML = "";
results.forEach(section => {
if (section.posts.length === 0) return;
const box = document.createElement('div');
box.className = 'w19-label-box';
const labelUrl = `${domain}/search/label/${encodeURIComponent(section.label)}`;
let postsHtml = "";
section.posts.forEach(post => {
postsHtml += `
<a class="w19-post-card" href="${post.url}" title="${post.title}" target="_blank" rel="noopener">
<div class="w19-thumb-wrapper">
<img class="w19-thumb-img" src="${post.image}" alt="${post.title}" loading="lazy" width="250" height="140" />
</div>
<div class="w19-post-details">
<h4 class="w19-post-title">${post.title}</h4>
<span class="w19-post-date">${post.date}</span>
</div>
</a>
`;
});
box.innerHTML = `
<div class="w19-label-header">
<h3 class="w19-label-title">${section.label}</h3>
<a class="w19-label-more" href="${labelUrl}" target="_blank" rel="noopener">Selengkapnya →</a>
</div>
<div class="w19-posts-container">
${postsHtml}
</div>
`;
mainGrid.appendChild(box);
});
}
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initPageWidget);
} else {
initPageWidget();
}
})();
</script>
Tahap 2: Cara Pemasangan di Blogger (Blogspot)
Pemasangan di platform Blogger sangat mudah karena sistem native Blogger sudah mendukung JSON Feed API secara langsung.
Metode A: Dipasang pada Halaman Khusus (Static Page) atau Postingan
Jika Anda ingin membuat halaman khusus seperti "Daftar Isi Kategori" atau "Portal Berita" di Blogger:
Masuk ke Dashboard Blogger Anda.
Klik menu Halaman (Pages) > Halaman Baru (New Page).
Ubah mode editor dari Tampilan Menulis (Compose view) ke Tampilan HTML (HTML view) melalui ikon pensil di pojok kiri atas.
Paste (tempel) seluruh kode di atas ke dalam editor HTML tersebut.
Sesuaikan bagian variabel JavaScript:
Ubah
const domain = "[https://www.warkasa1919.com](https://www.warkasa1919.com)";sesuai domain Anda.Sesuaikan isi array
const labels = [...]dengan nama-nama Label yang ada di Blogger Anda (perhatikan huruf besar dan kecilnya).
Isikan Judul Halaman (misal: Indeks Kategori) lalu klik Publikasikan.
Metode B: Dipasang pada Layout/Tata Letak Blogger (Sidebar / Homepage)
Jika Anda ingin menampilkan widget ini di homepage atau area layout blog:
Di Dashboard Blogger, pilih menu Tata Letak (Layout).
Pilih area di mana Anda ingin memasang widget (misal: Main Column, Top Footer, atau Sidebar), lalu klik + Tambahkan Gadget.
Pilih jenis gadget HTML/JavaScript.
Biarkan kolom Judul kosong (atau isi jika perlu).
Tempelkan (paste) seluruh kode di atas ke dalam kolom Konten.
Klik Simpan (Save).
Tahap 3: Cara Pemasangan di WordPress
Platform WordPress memiliki struktur yang sedikit berbeda. Namun, Anda dapat memasang widget ini dengan dua cara mudah berikut:
Metode A: Menggunakan Block Editor (Gutenberg) pada Page/Post
Masuk ke Dashboard Admin WordPress Anda.
Buka Pages > Add New Page (atau pilih postingan yang ingin dipasangi widget).
Klik tanda plus (+) untuk menambahkan blok baru.
Cari dan pilih blok Custom HTML.
Paste (tempel) master kode di atas ke dalam kolom blok Custom HTML tersebut.
Catatan Penting untuk WordPress:
Karena skrip ini mengambil data dari API Blogger (
/feeds/posts/summary), jika Anda ingin menerapkannya di WordPress asli, pastikan domain diatur mengarah ke Feed Blogger, ATAU jika Anda menggunakan WordPress murni, API endpoint pada kode skrip perlu disesuaikan menggunakan WordPress REST API (/wp-json/wp/v2/posts).
Klik Preview untuk mengecek tampilan, lalu tekan Publish.
Metode B: Menggunakan Plugin Insert Headers and Footers / Code Snippets
Jika Anda ingin memasang widget di sidebar atau footer menggunakan Widget Block:
Buka Appearance > Widgets.
Tambahkan blok Custom HTML pada area widget yang diinginkan (misal: Footer Widget Area).
Tempelkan kodenya dan klik Update.
Tahap 4: Cara Mengustomisasi Tampilan Widget
Setiap blog memiliki identitas visual dan skema warna yang berbeda. Anda dapat dengan mudah menyesuaikan warna dan ukuran widget agar selaras dengan desain blog Anda melalui CSS:
1. Mengubah Warna Utama (Brand Color)
Warna aksen standar pada kode ini adalah warna biru (#2563eb). Jika blog Anda mendominasi warna hijau, merah, atau oranye, cukup cari dan ganti kode warna #2563eb di bagian CSS dengan kode warna hex pilihan Anda:
Ganti warna garis indikator judul:
CSS.w19-label-title::before { background: #00g000 !important; /* Ganti kode warna di sini */ }Ganti warna tombol 'Selengkapnya':
CSS.w19-label-more { color: #00g000 !important; }
2. Mengatur Lebar Kartu Artikel
Jika Anda merasa kartu artikel terlalu lebar atau terlalu sempit saat di-scroll, sesuaikan atribut flex pada kelas .w19-post-card:
.w19-post-card {
flex: 0 0 180px !important; /* Ubah 180px menjadi 200px atau 150px sesuai selera */
}
3. Mengubah Jumlah Artikel yang Ditampilkan
Pada skrip JavaScript, ubah nilai pada variabel postsPerLabel:
const postsPerLabel = 8; // Mengambil 8 artikel per label/kategori
Tips Optimasi SEO untuk Widget Feed
Memasang widget yang cantik tentu bagus, tetapi memastikan widget tersebut ramah SEO jauh lebih penting agar tidak menurunkan reputasi situs di mata mesin pencari seperti Google.
Gunakan Gambar yang Sudah Terkompres: Kode skrip di atas secara otomatis mengambil gambar berukuran sedang (
w500-h281) dari Blogger, sehingga ukuran berkas tetap kecil dan memuat sangat cepat.Gunakan Atribut
loading="lazy": Pada kode HTML generator, gambar kartu sudah dilengkapi atributloading="lazy". Ini memastikan gambar baru akan dimuat saat pengguna menggulir ke area tersebut, sehingga menghemat kuota dan mempercepat skor Core Web Vitals.Internal Linking yang Kuat: Setiap kartu mengarah langsung ke artikel terkait lengkap dengan atribut
title. Selain itu, tombol "Selengkapnya →" secara otomatis membuat internal link ke halaman kategori/label, yang sangat bagus untuk mendistribusikan link juice di situs Anda.
FAQ (Pertanyaan yang Sering Diajukan)
Q: Apakah widget ini membebaskan blog dari beban loading yang berat?
A: Ya. Widget ini menggunakan metode asynchronous loading berbasis JavaScript
Promise.all. Artinya, data feed dipanggil di belakang layar setelah kerangka utama situs selesai dimuat, sehingga tidak menghambat waktu muat pertama (First Contentful Paint).
Q: Mengapa artikel di kategori tertentu tidak muncul?
A: Pastikan penulisan nama label di dalam skrip
const labels = [...]sama persis dengan penulisan label di blog Anda, termasuk penggunaan huruf kapital dan spasi.
Q: Bisakah widget ini digunakan di tampilan mobile?
A: Sangat bisa! Widget ini dirancang responsive-first dan sudah diuji dapat di-scroll dengan sangat mulus di perangkat Android maupun iOS.
Kesimpulan
Menambah fitur feed category horizontal scroll adalah langkah cerdas untuk menyegarkan tampilan blog Anda. Selain membuat situs tampak modern seperti portal berita papan atas, fitur ini terbukti memudahkan pembaca dalam mengoperasikan situs Anda.
Hanya dengan menyalin dan menyesuaikan sedikit variabel kode di atas, blog Blogger atau WordPress Anda kini tampil jauh lebih profesional dan interaktif. Selamat mencoba, dan semoga trafik situs Anda semakin meningkat!
Artikel ini diterbitkan secara eksklusif untuk pembaca Warkasa1919.com — Solusi Tutorial Web & Teknologi Terpercaya.