How To Add A Recent Posts Slider To Your Blogger Website?

You may have visited a couple of websites and noticed that their posts move automatically in a vertical position and wondered how you can get this on your blogger website. Below is some types on how you can get this widget on your blogger website.

Step 1: Go to Blogger's layout section and click Add Gadgets 

Step 2: You will have to choose HTML/JavaScript and copy the code provided below

Below this recent post slider shows posts based on particular label 

<div id="recent-posts-slider">

  <ul id="recent-posts-list"></ul>

</div>

<style>

#recent-posts-slider {

  overflow: hidden;

  width: auto; /* Ensure full width */

  background: #f9f9f9;

  border: 0px solid #ddd;

  padding: 10px;

}

#recent-posts-list {

  display: flex;

  gap: 15px;

  animation: slide-left linear infinite;

  list-style: none;

  padding: 0;

  margin: 0;

}

#recent-posts-list li {

  min-width: 220px;

  max-width: 220px;

  background: transparent;

  border: 0px solid #ccc;

  padding: 5px;

  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);

  text-align: center;

}

#recent-posts-list img {

  max-width: 100%;

  height: auto;

  margin-bottom: 8px;

}

#recent-posts-list a {

  text-decoration: none;

  color: #ff6a00;

  font-weight: bold;

}

/* Media Queries for responsiveness */

@media (max-width: 768px) {

  #recent-posts-list li {

    min-width: 150px; /* Reduce the min-width on mobile */

    max-width: 150px;

  }

}

@media (max-width: 480px) {

  #recent-posts-list li {

    min-width: 120px; /* Further reduce for smaller screens */

    max-width: 120px;

  }

}

@keyframes slide-left {

  0% { transform: translateX(0); }

  100% { transform: translateX(-100%); }

}

</style>

<script>

  const feedUrl = "https://prsdube16.blogspot.com/feeds/posts/default/-/Upcoming?alt=json"; // Change 'Tech' to your label

  const list = document.getElementById("recent-posts-list");

  fetch(feedUrl)

    .then(res => res.json())

    .then(data => {

      const posts = data.feed.entry || [];

      posts.slice(0, 10).forEach(post => {

        const title = post.title.$t;

        const link = post.link.find(l => l.rel === "alternate").href;

        let thumb = "https://via.placeholder.com/220x150?text=No+Image";

        if (post.media$thumbnail) {

          thumb = post.media$thumbnail.url;

        } else if (post.content && post.content.$t.match(/<img[^>]+src="([^">]+)/)) {

          thumb = post.content.$t.match(/<img[^>]+src="([^">]+)/)[1];

        }

        const li = document.createElement("li");

        li.innerHTML = `

          <a href="${link}" target="_blank">

            <img src="${thumb}" alt="${title}" />

            <div>${title}</div>

          </a>

        `;

        list.appendChild(li);

      });

      const speed = 40;

      list.style.animationDuration = `${speed}s`;

    })

    .catch(err => {

      console.error("Failed to load recent posts:", err);

      list.innerHTML = "<li>Failed to load posts.</li>";

    });

</script>

This recent posts slider shows all posts by default

<div id="recent-posts-slider">

  <ul id="recent-posts-list"></ul>

</div>

<style>

#recent-posts-slider {

  overflow: hidden;

  width: auto; /* Ensure full width */

  background: #f9f9f9;

  border: 0px solid #ddd;

  padding: 10px;

}

#recent-posts-list {

  display: flex;

  gap: 15px;

  animation: slide-left linear infinite;

  list-style: none;

  padding: 0;

  margin: 0;

}

#recent-posts-list li {

  min-width: 220px;

  max-width: 220px;

  background: transparent;

  border: 0px solid #ccc;

  padding: 5px;

  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);

  text-align: center;

}

#recent-posts-list img {

  max-width: 100%;

  height: auto;

  margin-bottom: 8px;

}

#recent-posts-list a {

  text-decoration: none;

  color: #ff6a00;

  font-weight: bold;

}

/* Media Queries for responsiveness */

@media (max-width: 768px) {

  #recent-posts-list li {

    min-width: 150px; /* Reduce the min-width on mobile */

    max-width: 150px;

  }

}

@media (max-width: 480px) {

  #recent-posts-list li {

    min-width: 120px; /* Further reduce for smaller screens */

    max-width: 120px;

  }

}

@keyframes slide-left {

  0% { transform: translateX(0); }

  100% { transform: translateX(-100%); }

}

</style>

<script>

  const feedUrl = "https://prsdube16.blogspot.com/feeds/posts/default?alt=json"; 

  const list = document.getElementById("recent-posts-list");

  fetch(feedUrl)

    .then(res => res.json())

    .then(data => {

      const posts = data.feed.entry || [];

      posts.slice(0, 10).forEach(post => {

        const title = post.title.$t;

        const link = post.link.find(l => l.rel === "alternate").href;

        let thumb = "https://via.placeholder.com/220x150?text=No+Image";

        if (post.media$thumbnail) {

          thumb = post.media$thumbnail.url;

        } else if (post.content && post.content.$t.match(/<img[^>]+src="([^">]+)/)) {

          thumb = post.content.$t.match(/<img[^>]+src="([^">]+)/)[1];

        }

        const li = document.createElement("li");

        li.innerHTML = `

          <a href="${link}" target="_blank">

            <img src="${thumb}" alt="${title}" />

            <div>${title}</div>

          </a>

        `;

        list.appendChild(li);

      });

      const speed = 40;

      list.style.animationDuration = `${speed}s`;

    })

    .catch(err => {

      console.error("Failed to load recent posts:", err);

      list.innerHTML = "<li>Failed to load posts.</li>";

    });

</script>

Notes

• By const feedURL replace it with your URL and the Upcoming label replace it with any label on your website

• The const speed widget goes faster if decrease below 40

• By posts slice (0,10) this is where you decide how many posts you want to have displayed