You can show multiple post using this java script in your website . just copy the code and paste in gadget section add html/java script
<script>
// Blogger Feed URL (Replace 'your-blog-name' with your actual blog's name)
const blogUrl = "https://thedaily71.blogspot.com/feeds/posts/default?alt=json&max-results=100";
// Function to fetch and display posts
async function fetchBlogPosts() {
try {
const response = await fetch(blogUrl);
const data = await response.json();
const entries = data.feed.entry.slice(0, 100); // Limits the number of posts to 100
let htmlContent = "";
entries.forEach(entry => {
const title = entry.title.$t;
const link = entry.link.find(l => l.rel === "alternate").href;
const content = entry.content ? entry.content.$t : "";
const imgMatch = content.match(/<img.*?src=['"](.*?)['"]/);
const imgSrc = imgMatch ? imgMatch[1] : "https://via.placeholder.com/150"; // Default image if none found
htmlContent += `
<div class="post-box">
<a href="${link}" >
<img src="${imgSrc}" alt="${title}" />
<h3>${title}</h3>
</a>
</div>
`;
});
document.getElementById("blog-posts").innerHTML = htmlContent;
} catch (error) {
console.error("Error fetching blog posts:", error);
}
}
// Run function on page load
fetchBlogPosts();
</script>
<style>
#blog-posts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
.post-box {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
background: #fff;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}
.post-box img {
max-width: 100%;
height: auto;
}
.post-box h3 {
font-size: 14px;
margin: 10px 0 0;
}
</style>
<div id="blog-posts">Loading...</div>
0 মন্তব্যসমূহ