<ul id="random-posts"></ul>
<!-- Popup Container -->
<div id="popup-container" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:1000;">
<div id="popup-content" style="background:#fff; margin:10% auto; padding:20px; width:80%; max-height:80%; overflow:auto; position:relative;">
<button id="close-popup" style="position:absolute; top:10px; right:10px; background:red; color:white; border:none; padding:5px 10px; cursor:pointer;">Close</button>
<div id="popup-body"></div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const randomPostsNumber = 20; // Jumlah random posts
const randomPostsChars = 100; // Jumlah karakter deskripsi
const randomPostsContainer = document.getElementById("random-posts");
function loadRandomPosts() {
const script = document.createElement("script");
script.src = "/feeds/posts/default?alt=json-in-script&max-results=" + randomPostsNumber + "&callback=renderRandomPosts";
document.body.appendChild(script);
}
window.renderRandomPosts = function (json) {
json.feed.entry.forEach(entry => {
const title = entry.title.$t;
const link = entry.link.find(l => l.rel === "alternate").href;
const content = entry.content ? entry.content.$t : entry.summary.$t;
const snippet = content.replace(/<[^>]*>/g, "").substring(0, randomPostsChars) + "...";
const thumbnail = entry.media$thumbnail ? entry.media$thumbnail.url : "https://via.placeholder.com/150";
const li = document.createElement("li");
li.innerHTML = `
<a href="#" class="random-link" data-title="${title}" data-link="${link}" data-snippet="${snippet}">
<img src="${thumbnail}" alt="${title}">
<div>${title}</div>
</a>
`;
randomPostsContainer.appendChild(li);
});
};
// Event listener for popup
randomPostsContainer.addEventListener("click", function (e) {
const target = e.target.closest(".random-link");
if (target) {
e.preventDefault();
const popup = document.getElementById("popup-container");
const popupBody = document.getElementById("popup-body");
popupBody.innerHTML = `
<h2>${target.dataset.title}</h2>
<p>${target.dataset.snippet}</p>
<a href="${target.dataset.link}" target="_blank">Read more</a>
`;
popup.style.display = "block";
}
});
// Close popup
document.getElementById("close-popup").addEventListener("click", function () {
document.getElementById("popup-container").style.display = "none";
});
// Load random posts
loadRandomPosts();
});
</script>
No comments:
Post a Comment