Cara Membuat Featured Post Slider Blogger Otomatis yang Keren Mirip Media Koran Jakarta, Cukup Ganti URL Domain

Cara Membuat Featured Post Slider Blogger Otomatis

BLOGSIA - Featured Post merupakan salah satu elemen yang mampu meningkatkan tampilan halaman depan Blogger menjadi lebih profesional. 

Selain membuat blog terlihat modern dan SEO, widget ini juga membantu pengunjung menemukan artikel terbaru dan artikel unggulan dengan lebih cepat.

Jika biasanya membuat Featured Post membutuhkan pengaturan yang cukup rumit, kini Anda hanya perlu menempelkan satu script ke Widget Tata Letak Blogger, kemudian mengganti URL blog dengan domain milik Anda. 

Seluruh isi widget akan terisi secara otomatis melalui Blogger JSON Feed sehingga tidak perlu lagi menambahkan artikel satu per satu.

Apa Itu Featured Post Slider?

Featured Post Slider adalah widget yang menampilkan beberapa artikel terbaru dalam bentuk slideshow dengan gambar berukuran besar. Pada script ini, tampilan dibuat lebih lengkap karena terdiri dari tiga bagian utama dalam satu layout, yaitu:

• Headline di sisi kiri.
• Featured Post Slider di bagian tengah.
• Grid thumbnail di bawah slider.
• Daftar postingan populer di sisi kanan.

Seluruh konten akan diperbarui secara otomatis sesuai artikel terbaru yang diterbitkan di Blogger menggunakan Blogger JSON Feed.

Keunggulan Widget  Featured Post Slider Blogger Otomatis

Widget Featured Post ini memiliki berbagai fitur yang membuatnya layak digunakan pada halaman utama Blogger, di antaranya:

• Mengambil artikel secara otomatis dari Blogger Feed.
• Tidak memerlukan edit HTML template.
• Cukup dipasang melalui menu Tata Letak.
• Slider berjalan otomatis setiap beberapa detik.
• Dilengkapi tombol navigasi sebelumnya dan berikutnya.
• Memiliki thumbnail grid sebagai navigasi cepat.
• Mendukung Dark Mode.
• Responsive untuk desktop maupun perangkat seluler.
• Menggunakan Lazy Load pada gambar sehingga lebih ringan.
• Tidak membutuhkan library tambahan seperti jQuery.

Selain itu, widget juga telah menggunakan CSS modern dan JavaScript bawaan sehingga proses pemuatan halaman tetap cepat. Dukungan Dark Mode juga sudah tersedia melalui pengaturan variabel CSS sehingga tampilannya menyesuaikan tema blog.

Cara Memasang Featured Post Slider di Blogger

Ikuti langkah-langkah berikut.

1. Login ke Dashboard Blogger.

2. Masuk ke menu Tata Letak (Layout).

3. Klik Tambahkan Gadget.

4. Pilih gadget HTML/JavaScript.

5. Salin seluruh script Featured Post ke dalam gadget tersebut.


Ini scriptnya:


<!-- Widget Layout: Headlines (Kiri), Featured Post Slider (Tengah atas) + Sub Grid Slide (Tengah bawah), Postingan Populer (Kanan) -->

<!-- Fully Automated via Blogger JSON Feed & Built-in Dark Mode Support -->

<style>

:root {

--bg-main: #ffffff;

--bg-card: #f9f9f9;

--text-main: #222222;

--text-muted: #666666;

--border-color: #e0e0e0;

--primary-color: #1b5e20;

--primary-hover: #2e7d32;

--accent-bg: #e8f5e9;

}


/* Dark Mode: Memaksa background menjadi transparan agar menyatu dengan warna dasar template utama blog */

[data-theme="dark"], .dark-mode, body.dark-mode {

--bg-main: transparent;

--bg-card: transparent;

--text-main: #e0e0e0;

--text-muted: #aaaaaa;

--border-color: #2c2c2c;

--primary-color: #2e7d32;

--primary-hover: #4caf50;

--accent-bg: #1a2e1b;

}

.news-layout-wrapper {

width: 100%;

max-width: 1250px;

margin: 20px auto;

font-family: Arial, sans-serif;

background-color: var(--bg-main) !important;

color: var(--text-main);

box-sizing: border-box;

}

.news-layout-wrapper *, .news-layout-wrapper *::before, .news-layout-wrapper *::after {

box-sizing: border-box;

}

.news-grid-container {

display: flex;

flex-wrap: wrap;

gap: 15px;

background: transparent !important;

}

/* Kolom Kiri: Headlines */

.news-col-left {

flex: 1;

min-width: 280px;

background: var(--bg-card);

border: 1px solid var(--border-color);

border-radius: 4px;

display: flex;

flex-direction: column;

order: 1;

}

/* Kolom Tengah: Featured Post & Sub Grid */

.news-col-center {

flex: 2;

min-width: 320px;

display: flex;

flex-direction: column;

gap: 12px;

order: 2;

background: transparent !important;

}

/* Kolom Kanan: Postingan Populer */

.news-col-right {

flex: 1;

min-width: 280px;

background: var(--bg-card);

border: 1px solid var(--border-color);

border-radius: 4px;

display: flex;

flex-direction: column;

order: 3;

}

/* Section Header */

.news-section-header {

background-color: var(--primary-color);

color: #ffffff;

padding: 10px 15px;

font-size: 14px;

font-weight: bold;

display: flex;

justify-content: space-between;

align-items: center;

border-top-left-radius: 4px;

border-top-right-radius: 4px;

}

.news-section-header span.sub {

font-size: 12px;

font-weight: normal;

background: rgba(255,255,255,0.2);

padding: 2px 6px;

border-radius: 3px;

}

/* Headline List Items */

.headline-list {

padding: 10px;

overflow-y: auto;

max-height: 520px;

background: var(--bg-card);

}

.headline-item {

display: flex;

gap: 10px;

padding: 8px 0;

border-bottom: 1px solid var(--border-color);

align-items: flex-start;

text-decoration: none;

color: inherit;

transition: background 0.2s;

}

.headline-item:last-child {

border-bottom: none;

}

.headline-item:hover {

background-color: var(--accent-bg);

}

.headline-thumb {

width: 70px;

height: 50px;

object-fit: cover;

border-radius: 3px;

flex-shrink: 0;

background: var(--border-color);

}

.headline-title {

font-size: 12px;

line-height: 1.3;

font-weight: bold;

display: -webkit-box;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical;

overflow: hidden;

color: var(--text-main);

}

/* Featured Slider Styling */

.featured-main-card {

background: var(--bg-card);

border: 1px solid var(--border-color);

border-radius: 4px;

overflow: hidden;

position: relative;

}

.featured-slider-container {

position: relative;

width: 100%;

height: 310px;

background: var(--border-color);

}

.featured-slide {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

opacity: 0;

transition: opacity 0.6s ease-in-out;

display: none;

}

.featured-slide.active {

opacity: 1;

display: block;

}




.featured-main-img {

width: 100%;

height: 100%;

object-fit: cover;

}

.featured-main-overlay {

position: absolute;

bottom: 0;

left: 0;

right: 0;

background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 70%, transparent 100%);

padding: 20px 15px 15px 15px;

color: #ffffff;

}

.featured-main-title {

font-size: 17px;

font-weight: bold;

line-height: 1.3;

margin-bottom: 6px;

color: #ffffff;

text-decoration: none;

display: block;

}

.featured-main-title:hover {

text-decoration: underline;

}

.featured-main-meta {

font-size: 11px;

opacity: 0.85;

}

/* Slider Navigation Arrows */

.slider-arrow {

position: absolute;

top: 45%;

transform: translateY(-50%);

background: rgba(0, 0, 0, 0.5);

color: #fff;

border: none;

width: 35px;

height: 45px;

cursor: pointer;

font-size: 18px;

display: flex;

align-items: center;

justify-content: center;

z-index: 10;

transition: background 0.2s;

}

.slider-arrow:hover {

background: rgba(0, 0, 0, 0.8);

}

.slider-prev { left: 0; }

.slider-next { right: 0; }

/* Sub Grid / Thumbnail Carousel under Featured Post */

.featured-sub-grid {

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 8px;

background: transparent !important;

}

.sub-grid-item {

background: var(--bg-card);

border: 1px solid var(--border-color);

border-radius: 4px;

overflow: hidden;

display: flex;

flex-direction: column;

text-decoration: none;

color: inherit;

cursor: pointer;

transition: all 0.2s;

}

.sub-grid-item:hover, .sub-grid-item.active-thumb {

border-color: var(--primary-color);

transform: translateY(-2px);

}

.sub-grid-thumb {

width: 100%;

height: 65px;

object-fit: cover;

background: var(--border-color);

flex-shrink: 0;

}

.sub-grid-content {

padding: 6px 8px;

font-size: 10.5px;

font-weight: bold;

line-height: 1.3;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

overflow: hidden;

color: var(--text-main);

background: var(--bg-card);

min-height: 42px;

}

/* Popular Posts */

.popular-list {

padding: 10px;

overflow-y: auto;

max-height: 520px;

background: var(--bg-card);

}


.popular-item {

display: flex;

gap: 10px;

padding: 8px 0;

border-bottom: 1px solid var(--border-color);

align-items: flex-start;

text-decoration: none;

color: inherit;

}

.popular-item:last-child {

border-bottom: none;

}

.popular-item:hover {

background-color: var(--accent-bg);

}

.popular-thumb {

width: 60px;

height: 45px;

object-fit: cover;

border-radius: 3px;

flex-shrink: 0;

background: var(--border-color);

}

.popular-title {

font-size: 11px;

line-height: 1.3;

font-weight: bold;

display: -webkit-box;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical;

overflow: hidden;

color: var(--text-main);

}

.index-footer {

padding: 8px 15px;

background: var(--bg-card);

border-top: 1px solid var(--border-color);

text-align: right;

font-size: 11px;

font-weight: bold;

border-bottom-left-radius: 4px;

border-bottom-right-radius: 4px;

}

.index-footer a {

color: var(--primary-color);

text-decoration: none;

}

.index-footer a:hover {

text-decoration: underline;

}

/* Responsive Design */

@media(max-width: 900px) {

.news-grid-container {

flex-direction: column;

}

.news-col-center {

width: 100%;

order: 1;

}

.news-col-left {

width: 100%;

order: 2;

}

.news-col-right {

width: 100%;

order: 3;

}

.sub-grid-thumb {

height: 50px;

}

.sub-grid-content {

font-size: 9.5px;

padding: 4px 5px;

min-height: 38px;

}

}

</style>

<div class="news-layout-wrapper">

<div class="news-grid-container" id="blogsia-news-widget">

<!-- Kolom Kiri: Headlines -->

<div class="news-col-left">

<div class="news-section-header">

Headline <span class="sub" id="hl-label">Terbaru</span>

</div>

<div class="headline-list" id="blogsia-headlines">

<div style="padding: 20px; text-align: center; font-size: 12px; color: var(--text-muted);">Memuat headline...</div>

</div>

<div class="index-footer">

<a href="https://domainanda.com" id="hl-more-link">Indeks Berita HL &raquo;</a>

</div>

</div>

<!-- Kolom Tengah: Featured Post Slider & Sub Grid Slider di Bawahnya -->

<div class="news-col-center">

<!-- Main Featured Slider -->

<div class="featured-main-card">

<div class="featured-slider-container" id="blogsia-featured-slider">

<div style="height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 13px;">Memuat Slider Utama...</div>

</div>

<button class="slider-arrow slider-prev" id="slide-prev">&#10094;</button>

<button class="slider-arrow slider-next" id="slide-next">&#10095;</button>

</div>

<!-- Sub Grid / Thumbnail Post di Bawah Slider -->

<div class="featured-sub-grid" id="blogsia-sub-grid">

<!-- Loaded dynamically -->

</div>

</div>

<!-- Kolom Kanan: Postingan Populer -->

<div class="news-col-right">

<div class="news-section-header">

Populer <span class="sub">Hari Ini</span>

</div>

<div class="popular-list" id="blogsia-popular">

<div style="padding: 20px; text-align: center; font-size: 12px; color: var(--text-muted);">Memuat populer...</div>

</div>

<div class="index-footer">

<a href="https://domainanda.com" id="pop-more-link">Indeks Berita Populer &raquo;</a>

</div>

</div>

</div>

</div>

<script>

(function() {

const blogURL = "https://domainanda.com";



function getThumb(entry) {

if (entry.media$thumbnail) {

return entry.media$thumbnail.url.replace(/\/s[0-9]+(\-c)?\//, '/s800/');

} else if (entry.content && entry.content.$t) {

let div = document.createElement('div');

div.innerHTML = entry.content.$t;

let img = div.querySelector('img');

if (img) return img.src;

}

return "https://via.placeholder.com/800x500?text=Blogsia";

}

function formatDate(dateStr) {

const d = new Date(dateStr);

const options = { day: '2-digit', month: '2-digit', year: 'numeric' };

const timeOpts = { hour: '2-digit', minute: '2-digit' };

return d.toLocaleDateString('id-ID', options) + ' - ' + d.toLocaleTimeString('id-ID', timeOpts) + ' WIB';

}

fetch(blogURL + '/feeds/posts/default?alt=json&max-results=15')

.then(response => response.json())

.then(json => {

let entries = json.feed.entry;

if (!entries || entries.length === 0) return;

// 1. Kolom Kiri: Headlines (Post ke-5 s.d ke-10)

let hlHtml = '';

let hlItems = entries.slice(4, 10);

hlItems.forEach(item => {

let title = item.title.$t;

let link = item.link.find(l => l.rel === 'alternate').href;

let thumb = getThumb(item);

hlHtml += `

<a href="${link}" class="headline-item">

<img src="${thumb}" class="headline-thumb" alt="${title}" loading="lazy"/>

<div class="headline-title">${title}</div>

</a>

`;

});

document.getElementById('blogsia-headlines').innerHTML = hlHtml;

// 2. Kolom Tengah: Featured Post Slider (4 Post Pertama)

let sliderItems = entries.slice(0, 4);

let sliderHtml = '';

let subGridHtml = '';

sliderItems.forEach((item, index) => {

let title = item.title.$t;

let link = item.link.find(l => l.rel === 'alternate').href;

let thumb = getThumb(item);

let date = formatDate(item.published.$t);

let activeClass = index === 0 ? 'active' : '';

let activeThumb = index === 0 ? 'active-thumb' : '';

sliderHtml += `

<div class="featured-slide ${activeClass}" data-index="${index}">

<img src="${thumb}" class="featured-main-img" alt="${title}" />

<div class="featured-main-overlay">

<a href="${link}" class="featured-main-title">${title}</a>

<div class="featured-main-meta">${date}</div>

</div>

</div>

`;

subGridHtml += `

<div class="sub-grid-item ${activeThumb}" data-index="${index}" onclick="goToSlide(${index})">

<img src="${thumb}" class="sub-grid-thumb" alt="${title}" loading="lazy"/>

<div class="sub-grid-content">${title}</div>

</div>

`;

});

document.getElementById('blogsia-featured-slider').innerHTML = sliderHtml;

document.getElementById('blogsia-sub-grid').innerHTML = subGridHtml;

// Slider Logic

let currentIndex = 0;

const totalSlides = sliderItems.length;

window.goToSlide = function(index) {

currentIndex = index;

updateSlider();

};

function updateSlider() {

const slides = document.querySelectorAll('.featured-slide');

const thumbs = document.querySelectorAll('.sub-grid-item');

slides.forEach((slide, i) => {

slide.classList.toggle('active', i === currentIndex);

});

thumbs.forEach((thumb, i) => {

thumb.classList.toggle('active-thumb', i === currentIndex);

});

}

function nextSlide() {

currentIndex = (currentIndex + 1) % totalSlides;

updateSlider();

}

function prevSlide() {

currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;

updateSlider();

}

document.getElementById('slide-next').addEventListener('click', nextSlide);

document.getElementById('slide-prev').addEventListener('click', prevSlide);

let slideInterval = setInterval(nextSlide, 5000);
const centerCol = document.querySelector('.news-col-center');

centerCol.addEventListener('mouseenter', () => clearInterval(slideInterval));

centerCol.addEventListener('mouseleave', () => slideInterval = setInterval(nextSlide, 5000));

// 3. Kolom Kanan: Postingan Populer (Post ke-5 s.d ke-11)

let popHtml = '';

let popItems = entries.slice(4, 11);

popItems.forEach(item => {

let title = item.title.$t;

let link = item.link.find(l => l.rel === 'alternate').href;

let thumb = getThumb(item);

popHtml += `

<a href="${link}" class="popular-item">

<img src="${thumb}" class="popular-thumb" alt="${title}" loading="lazy"/>

<div class="popular-title">${title}</div>

</a>

`;

});

document.getElementById('blogsia-popular').innerHTML = popHtml;

})

.catch(err => {

console.error("Gagal memuat widget berita:", err);

});

})();

</script>




6. Cari bagian berikut pada script:




javascript

const blogURL = "https://domainanda.com";


7. Ganti https://domainanda.com dengan alamat blog Anda sendiri.

8. Simpan gadget.

9. Muat ulang halaman utama blog.


Setelah selesai, widget akan otomatis mengambil artikel terbaru dari blog tanpa perlu melakukan pengaturan tambahan. URL blog hanya perlu diganti satu kali pada variabel `blogURL` dan seluruh data artikel akan dimuat melalui Blogger JSON Feed.

Bagaimana Widget Ini Bekerja?

Script akan membaca feed artikel Blogger menggunakan format JSON. Dari data tersebut, widget secara otomatis membagi artikel ke beberapa bagian.

• Empat artikel terbaru ditampilkan sebagai Featured Post Slider.
• Beberapa artikel berikutnya ditampilkan sebagai Headline.
• Artikel lainnya ditampilkan pada daftar Postingan Populer.

Setiap artikel akan menampilkan gambar utama, judul, tautan menuju artikel, serta tanggal publikasi sehingga tampilan homepage menjadi lebih informatif.

Kelebihan Dibanding Featured Post Manual

Menggunakan widget otomatis memiliki beberapa keuntungan dibanding membuat Featured Post secara manual.

• Tidak perlu memperbarui daftar artikel setiap kali menerbitkan posting baru.
• Menghemat waktu pengelolaan blog.
• Selalu menampilkan artikel terbaru secara otomatis.
• Tampilan lebih profesional seperti portal berita.
• Ringan karena menggunakan Blogger Feed bawaan.

Widget ini cocok digunakan pada blog berita, teknologi, tutorial, pendidikan, maupun blog pribadi yang ingin memiliki tampilan homepage lebih modern.

Tips Agar Widget Berjalan Optimal

Supaya tampil maksimal, gunakan gambar unggulan dengan resolusi yang baik pada setiap artikel. Pastikan juga setiap posting memiliki thumbnail sehingga slider dapat menampilkan gambar secara sempurna.

Selain itu, gunakan jumlah posting terbaru yang cukup agar seluruh bagian widget dapat terisi dengan baik.

Featured Post Slider merupakan solusi praktis bagi pengguna Blogger yang ingin mempercantik tampilan halaman utama tanpa harus mengedit template secara rumit.

Cukup menempelkan script ke Widget Tata Letak dan mengganti alamat domain blog, seluruh artikel akan ditampilkan secara otomatis menggunakan Blogger JSON Feed.

Dengan tampilan slider modern, headline terbaru, thumbnail interaktif, serta daftar postingan populer, widget ini dapat meningkatkan pengalaman pengguna sekaligus membuat homepage terlihat lebih profesional dan menarik.


(*)

FAQ (Pertanyaan yang Sering Diajukan)

Apakah widget Featured Post Slider ini bisa digunakan di semua template Blogger?

Ya. Widget ini dapat digunakan di hampir semua template Blogger, baik template bawaan maupun template premium. Anda hanya perlu menambahkannya melalui menu Tata Letak (Layout) menggunakan gadget HTML/JavaScript.

Apakah saya harus mengedit kode HTML template Blogger?

Tidak. Widget ini dirancang agar dapat dipasang langsung melalui Widget Tata Letak, sehingga Anda tidak perlu mengubah kode HTML template.

Bagaimana cara mengaktifkan widget Featured Post Slider?

Caranya sangat mudah. Salin seluruh script ke gadget HTML/JavaScript, lalu ganti URL https://domainanda.com dengan alamat blog Anda sendiri. Setelah disimpan, widget akan menampilkan artikel secara otomatis.

Dari mana widget mengambil daftar artikel?

Widget mengambil data langsung dari Blogger JSON Feed. Karena itu, setiap kali Anda menerbitkan artikel baru, konten pada Featured Post Slider akan diperbarui secara otomatis tanpa perlu diedit lagi.

Apakah widget ini mendukung Dark Mode?

Ya. Script sudah dilengkapi dukungan Dark Mode menggunakan variabel CSS sehingga tampilannya dapat menyesuaikan tema blog yang menggunakan mode gelap.

Apakah Featured Post Slider responsif di perangkat seluler?

Ya. Layout widget telah dirancang responsif sehingga tampilannya tetap rapi pada desktop, tablet, maupun smartphone.

Apakah slider berjalan secara otomatis?

Ya. Slider akan berpindah ke artikel berikutnya secara otomatis dalam interval tertentu. Selain itu, tersedia tombol navigasi dan thumbnail sehingga pengunjung juga dapat berpindah slide secara manual.

Apakah widget ini memengaruhi kecepatan loading blog?

Tidak secara signifikan. Widget menggunakan JavaScript ringan, memanfaatkan Blogger JSON Feed, serta menerapkan lazy loading pada gambar sehingga tetap ramah terhadap performa halaman.

Apakah widget ini cocok untuk blog berita?

Sangat cocok. Selain blog berita, widget ini juga dapat digunakan pada blog tutorial, teknologi, pendidikan, bisnis, maupun blog pribadi yang ingin menampilkan artikel unggulan secara profesional.

Mengapa gambar artikel tidak muncul pada slider?

Biasanya hal ini terjadi karena artikel tidak memiliki gambar unggulan atau thumbnail. Pastikan setiap posting memiliki minimal satu gambar agar slider dapat menampilkan thumbnail dengan benar.

Thanks for reading: Cara Membuat Featured Post Slider Blogger Otomatis yang Keren Mirip Media Koran Jakarta, Cukup Ganti URL Domain, Sorry, my English is bad:)