How to Add Recent Posts with Image Slider in Blogger (2025 Animated Widget)

How to Add Recent Posts with Image Slider in Blogger (2025 Animated Widget)

Want to showcase your latest blog posts in a sliding carousel? Learn how to add a stylish recent posts image slider widget in Blogger using HTML and JavaScript — no plugins required!

Why Use a Recent Posts Slider?

A slider (carousel) helps feature your latest content in an interactive, modern way.

Increases homepage activity
Grabs attention with featured images
Reduces bounce rate
Keeps your site looking dynamic and professional. 

Step-by-Step: Add a Recent Posts Slider in Blogger

Step 1: Go to Blogger → Layout → Add Gadget

1. Choose a top or main section (e.g. Header, Above Fold, Main Area)
2. Click Add a Gadget → Choose HTML/JavaScript

Step 2: Paste This Slider Code

Use this full responsive code for a 5-post slider with auto-scroll:

<style>
#recent-slider {
  max-width: 100%;
  overflow: hidden;
  margin: auto;
}
.slider-container {
  display: flex;
  animation: slide-left 25s linear infinite;
}
.slider-item {
  flex: 0 0 100%;
  box-sizing: border-box;
  padding: 10px;
}
.slider-item img {
  width: 100%;
  border-radius: 8px;
}
.slider-item h4 {
  font-size: 16px;
  margin: 10px 0;
}
@keyframes slide-left {
  0% { transform: translateX(0%); }
  20% { transform: translateX(0%); }
  25% { transform: translateX(-100%); }
  45% { transform: translateX(-100%); }
  50% { transform: translateX(-200%); }
  70% { transform: translateX(-200%); }
  75% { transform: translateX(-300%); }
  95% { transform: translateX(-300%); }
  100% { transform: translateX(-400%); }
}
</style>

<div id="recent-slider">
  <div class="slider-container">
    <script>
      fetch('/feeds/posts/default?alt=json&max-results=5')
        .then(res => res.json())
        .then(data => {
          let html = '';
          data.feed.entry.forEach(post => {
            const title = post.title.$t;
            const link = post.link.find(l => l.rel === 'alternate').href;
            const content = post.content.$t;
            const imgMatch = content.match(/<img[^>]+src="([^">]+)"/);
            const img = imgMatch ? imgMatch[1] : 'https://via.placeholder.com/400x200';

            html += `
              <div class="slider-item">
                <a href="${link}">
                  <img src="${img}" alt="${title}">
                  <h4>${title}</h4>
                </a>
              </div>`;
          });
          document.querySelector('.slider-container').innerHTML = html;
        });
    </script>
  </div>
</div>

Save the gadget.

What Makes This Slider Unique?

Feature	Advantage
Auto-scroll	Keeps content moving and engaging
Uses recent blog feed	Always updates with latest posts
Image fallback	Shows placeholder if post has no image
Fully responsive	Works on desktop and mobile devices

---

Pro Tips

Tip	Why It Helps
Place at homepage top	Gets more attention
Use quality featured images	Boosts click-through rate
Combine with popular posts	Balances latest + trending content

---

Common Errors and Fixes

Problem	Solution
❌ Slider doesn’t scroll	✅ Ensure script and styles are pasted fully
❌ No images in posts	✅ Use placeholder fallback or add post image
❌ Posts not loading	✅ Check if feed is public and not restricted

---

This Recent Posts Image Slider:

• Makes your Blogger homepage modern
• Highlights your latest posts dynamically
• Encourages visitors to stay and explore more
• Works automatically — no manual updates needed

Related Posts:

Previous article

Next Post

Next article

Previous Post

Suleiman Inuwa

https://www.androidpols.com.ng/

I am a professional website developer and also an SEO expert.