Postingan blog

<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>