How to show blogspot post randomly in your gadget or website




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 মন্তব্যসমূহ

Loading posts...