gunakan script ini untuk menampilkan list atau daftar postingan untuk di pasang di halaman homepage ataupun d halaman statis pada blog anda
klik untuk menyalin
👇
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daftar Postingan Blog</title>
<style>
body {font-family: "Segoe UI", sans-serif; background: #f9fafb; margin: 0; padding: 20px;}
.post-card {
background: #fff; border-radius: 15px; overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 20px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.post-card:hover {transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.15);}
.post-thumb img {width: 100%; height: 180px; object-fit: cover;}
.post-content {padding: 15px;}
.post-title {font-size: 18px; color: #333; font-weight: 600; margin: 0 0 10px;}
.post-snippet {color: #555; font-size: 14px; line-height: 1.6em;}
.read-btn {
display: inline-block; margin-top: 10px; background: #38bdf8; color: #fff;
padding: 8px 14px; border-radius: 10px; text-decoration: none; font-size: 14px;
transition: background 0.3s;
}
.read-btn:hover {background: #0ea5e9;}
#loadMore {
display: block; width: 100%; text-align: center;
background: #0ea5e9; color: #fff; border: none;
padding: 12px; border-radius: 10px; font-size: 15px;
cursor: pointer; transition: background 0.3s; margin-top: 15px;
}
#loadMore:hover {background: #0284c7;}
.loading {text-align: center; color: #0ea5e9; margin-top: 15px;}
</style>
</head>
<body>
<h2 style="color:#0ea5e9;text-align:center;margin-bottom:25px;">📰 Daftar Postingan Terbaru</h2>
<div id="feedContainer"></div>
<div id="loading" class="loading"></div>
<button id="loadMore">Muat Lebih Banyak</button>
<script>
const rssURL = "https://YOURBLOGNAME.blogspot.com/feeds/posts/default?alt=json"; // Ganti dengan URL feed blog Bapak
let allPosts = [];
let currentIndex = 0;
const postsPerPage = 5;
async function loadFeed() {
document.getElementById("loading").textContent = "Sedang memuat...";
try {
const res = await fetch("https://api.allorigins.win/get?url=" + encodeURIComponent(rssURL));
const data = JSON.parse(res.ok ? (await res.json()).contents : "{}");
const feed = typeof data === "string" ? JSON.parse(data) : data;
allPosts = feed.feed.entry || [];
document.getElementById("loading").textContent = "";
showPosts();
} catch (err) {
document.getElementById("loading").textContent = "Gagal memuat feed 😢";
console.error(err);
}
}
function showPosts() {
const container = document.getElementById("feedContainer");
const nextPosts = allPosts.slice(currentIndex, currentIndex + postsPerPage);
nextPosts.forEach(item => {
const title = item.title.$t;
const link = item.link.find(l => l.rel === "alternate").href;
const content = item.content ? item.content.$t : "";
const imgMatch = content.match(/<img[^>]+src="([^">]+)"/);
const imgSrc = imgMatch ? imgMatch[1] : "https://via.placeholder.com/600x300?text=No+Image";
const snippet = content.replace(/<[^>]+>/g, "").substring(0, 120) + "...";
const safeLink = `https://serlok-app.blogspot.com/p/safe-link.html?url=${encodeURIComponent(link)}&title=${encodeURIComponent(title)}`;
const card = `
<div class="post-card">
<div class="post-thumb"><img src="${imgSrc}" alt="${title}"></div>
<div class="post-content">
<h3 class="post-title">${title}</h3>
<p class="post-snippet">${snippet}</p>
<a class="read-btn" href="${safeLink}" target="_blank">Baca Selengkapnya →</a>
</div>
</div>`;
container.insertAdjacentHTML("beforeend", card);
});
currentIndex += postsPerPage;
if (currentIndex >= allPosts.length) {
document.getElementById("loadMore").style.display = "none";
}
}
document.getElementById("loadMore").addEventListener("click", showPosts);
loadFeed();
</script>
</body>
</html>
Komentar untuk Kode script list artikel blog