Copy this code to randomly show your publish post from your all blog post .
<script>
async function fetchRandomPosts() {
const blogUrl = "https://thedaily71.blogspot.com/feeds/posts/default?alt=json&max-results=100"; // Fetch max 100 posts
try {
let response = await fetch(blogUrl);
let data = await response.json();
let entries = data.feed.entry || [];
let posts = entries.map(entry => {
let title = entry.title.$t;
let link = entry.link.find(l => l.rel === "alternate").href;
return { title, link };
});
// Shuffle posts randomly
posts.sort(() => 0.5 - Math.random());
// Pick 40 random posts
let selectedPosts = posts.slice(0, 40);
let html = selectedPosts.map(post => `<div class="post-title"><a href="${post.link}">${post.title}</a></div>`).join("");
document.getElementById("random-posts").innerHTML = html;
} catch (error) {
console.error("Error fetching blog posts:", error);
document.getElementById("random-posts").innerHTML = "Failed to load posts.";
}
}
// Load posts when the page loads
window.onload = fetchRandomPosts;
</script>
<div id="random-posts">Loading posts...</div>
<style>
.post-title {
margin-bottom: 10px; /* Space between each title */
font-size: 18px; /* Adjust font size */
padding-bottom: 5px; /* Space before the line */
border-bottom: 2px solid #0066cc; /* Colored line */
}
.post-title a {
text-decoration: none;
color: #0066cc; /* Title link color */
font-weight: bold; /* Make the title bold */
}
.post-title a:hover {
color: #ff6600; /* Color when hovered */
text-decoration: underline;
}
</style>
0 মন্তব্যসমূহ