Como insertar un Slider Carrusel en Blogger

Slider Carrusel para Blogger: últimas publicaciones (fácil y sin errores)

✨ TUTORIAL DEFINITIVO

¿Quieres insertar un slider carrusel en Blogger y te da error el código? ¿O simplemente buscas una forma rápida y 100% funcional? Has llegado al lugar indicado.

Ayudadeblogger.com te regala este espectacular slider que muestra las 10 publicaciones más recientes, compatible con todos los navegadores (Chrome, Firefox, Edge, etc.) y lo mejor: no rompe la estructura de tu plantilla. ✅

🎯 ¿Qué lograrás con este slider?

Un carrusel moderno, responsive y con imágenes en alta calidad. Al pasar las diapositivas verás un extracto del post, la fecha y un diseño limpio que invita a hacer clic. Esto aumenta las vistas internas y retiene a tus visitantes. Además el slider se desplaza suavemente tanto en móvil como en escritorio.

Nota Importante

Este tutorial está actualizado a la fecha actual, no tendrá ningún inconveniente al momento de su instalación.

Garantizado y completamente funcional

A continuación puede ver su demostración en el siguiente blog

Demo Clic aquí

Antes de Empezar: ¡Haz una Copia de Seguridad!

⚠️ Importante: Antes de realizar cualquier cambio en el código de tu plantilla, SIEMPRE haz una copia de seguridad. Es tu red de seguridad por si algo sale mal.

1. Ve a Tema en el menú de tu panel de Blogger.
2. Haz clic en Crear copia de seguridad (ubicado en la esquina superior derecha).
3. Guarda el archivo .xml en tu computadora.

Ayudadeblogger.com no se responsabiliza, si usted no realizo correctamente la inserción del código, para más detalles específicos, puede visitar el siguiente enlace:

Políticas de uso

⚡ Vista previa en vivo (tus últimas entradas)

Las tarjetas se generan automáticamente con los datos de tu blog. Si ves solo el cargador, espera un instante.

Últimas Publicaciones

Cargando contenido...

🔹 Funciona: si ves tus posts es que todo esta correcto. Si no, comprueba que tu blog tenga entradas publicadas.

📥 Cómo instalar este slider en tu Blogger (6 pasos sencillos)

1 Ve a Blogger.com → Diseño.

2 Haz clic en "Añadir un gadget" (donde quieras que aparezca el slider).

3 Selecciona "HTML/Javascript".

4 Copia y pega el siguiente código completo (incluye CSS, HTML y JavaScript).

5 Haz clic en "Guardar".

6 ✅ ¡Disfruta del slider! Revisa tu blog para ver las últimas 10 entradas en un carrusel profesional.

📋 Código listo para copiar y pegar

<!-- Modern Auto-Recent Posts Slider V2.1 -  Imagen & Mobile -->
<div id="modern-slider-wrapper">
  <div class="ms-header">
    <h3 class="ms-title-main">Últimas Publicaciones</h3>
    <div class="ms-controls">
      <button class="ms-nav-btn" id="prevBtn" aria-label="Anterior">
        <svg viewbox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
      </button>
      <button class="ms-nav-btn" id="nextBtn" aria-label="Siguiente">
        <svg viewbox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
      </button>
    </div>
  </div>

  <div class="ms-viewport" id="msViewport">
    <div class="ms-track" id="slider-track">
      <div class="ms-loader">Cargando contenido...</div>
    </div>
  </div>
</div>

<style>
:root {
  --primary-accent: #3b82f6; 
  --bg-card: #ffffff;
  --text-dark: #1e293b;
  --text-light: #64748b;
  --radius: 18px;
  --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#modern-slider-wrapper {
  max-width: 100%;
  margin: 20px auto;
  padding: 0 10px;
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  box-sizing: border-box;
}

.ms-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 5px;
}

.ms-title-main {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0;
  letter-spacing: -0.5px;
}

.ms-controls {
  display: flex;
  gap: 8px;
}

.ms-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.ms-nav-btn:hover {
  background: var(--primary-accent);
  border-color: var(--primary-accent);
}

.ms-nav-btn svg { width: 20px; height: 20px; fill: var(--text-dark); }
.ms-nav-btn:hover svg { fill: white; }

/* Viewport y Track */
.ms-viewport {
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 5px 5px 20px 5px;
  scrollbar-width: none;
}
.ms-viewport::-webkit-scrollbar { display: none; }

.ms-track {
  display: flex;
  gap: 16px;
}

/* Tarjeta Optimizada */
.ms-item {
  min-width: 280px;
  flex: 0 0 calc(25% - 12px); /* 4 en escritorio */
  scroll-snap-align: start;
  background: var(--bg-card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
  border: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}

.ms-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 20px -5px rgba(0,0,0,0.1);
}

/* Arreglo de Imagen Sin Distorsión */
.ms-thumb-link {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* Relación 16:9 perfecta */
  background: #f1f5f9;
  overflow: hidden;
}

.ms-thumb {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Evita estiramiento */
  object-position: center;
  transition: transform 0.8s ease;
}

.ms-body {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ms-date {
  font-size: 0.7rem;
  color: var(--primary-accent);
  font-weight: 700;
  text-transform: uppercase;
}

.ms-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.4;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ms-excerpt {
  font-size: 0.85rem;
  color: var(--text-light);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* RESPONSIVO AJUSTADO */
@media (max-width: 1024px) {
  .ms-item { flex: 0 0 calc(33.33% - 11px); }
}
@media (max-width: 768px) {
  .ms-item { flex: 0 0 calc(50% - 8px); }
}
@media (max-width: 480px) {
  .ms-item { 
    min-width: 260px;
    flex: 0 0 82%; /* Permite ver un trozo de la siguiente tarjeta */
  }
  .ms-title-main { font-size: 1.2rem; }
}
</style>

<script>
(function() {
  const config = {
    results: 10,
    noImg: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOAzh7i4k4VMcpDZikLZRR3y-qF0ZqQxCU43UA8bMgOEyQbHL32LjBjOhrnt37Jhyphenhyphen52Diio96TB2On-qFWa1oZeIoQWWrNvYG5fFXuovwjE_w5_8M16A4yoXSYN_TfNnGD-66A5Nyzmos/s1600/no+image.jpg"
  };

  const track = document.getElementById('slider-track');
  const viewport = document.getElementById('msViewport');

  async function loadPosts() {
    try {
      const response = await fetch(`/feeds/posts/summary?alt=json&max-results=${config.results}`);
      const data = await response.json();
      render(data.feed.entry);
    } catch (e) {
      track.innerHTML = '<div class="ms-loader">Error de conexión.</div>';
    }
  }

  function getHighResImg(url) {
    if (!url) return config.noImg;
    return url.replace(/\/s[0-9]+(-[chw0-9]+)*\//, '/s1600/');
  }

  function render(entries) {
    if (!entries) return;
    
    track.innerHTML = entries.map(entry => {
      const title = entry.title.$t;
      const link = entry.link.find(l => l.rel === 'alternate').href;
      const date = new Date(entry.published.$t).toLocaleDateString('es-ES', { 
        day: '2-digit', month: 'short', year: 'numeric' 
      });
      
      let img = config.noImg;
      if (entry.media$thumbnail) {
        img = getHighResImg(entry.media$thumbnail.url);
      }

      const snippet = entry.summary.$t.replace(/<[^>]*>?/gm, '').substring(0, 80);

      return `
        <article class="ms-item">
          <a href="${link}" class="ms-thumb-link">
            <img src="${img}" class="ms-thumb" alt="${title}" loading="lazy">
          </a>
          <div class="ms-body">
            <span class="ms-date">${date}</span>
            <a href="${link}" class="ms-title">${title}</a>
            <p class="ms-excerpt">${snippet}...</p>
          </div>
        </article>
      `;
    }).join('');
  }

  // Navegación
  const scrollAmount = () => track.querySelector('.ms-item').offsetWidth + 16;
  document.getElementById('nextBtn').onclick = () => viewport.scrollLeft += scrollAmount();
  document.getElementById('prevBtn').onclick = () => viewport.scrollLeft -= scrollAmount();

  loadPosts();
})();
</script>

💡 ¿Cómo funciona exactamente? El script obtiene automáticamente las 10 publicaciones más recientes desde el feed de tu blog. Mejora la URL de las imágenes a tamaño grande (s1600) para que se vean nítidas. Los botones laterales desplazan el carrusel suavemente y en móvil también funciona con deslizamiento táctil.

📚 Recursos extra: más sliders y slideshows

¿Quieres variantes? Aquí tienes una colección de los mejores artículos sobre sliders, slideshows y galerías para Blogger de Ayudadeblogger.com:

Slideshow automático Slideshow manual Galería de imágenes gratis Carrusel por etiquetas Slideshow en simples pasos Galería de imágenes V3 Slideshow 1 widget Con entradas populares Slider genérico Slideshow nuevo estilo Control deslizante Slider carrusel clásico Slider 3D Populares nuevo estilo Slideshow básico Con etiquetas Manual nuevo estilo Nuevo estilo Slideshow vertical Widget galería V2 Acordeón imágenes Widget Slideshow Slideshow con populares

🧠 Resumen y ayuda

¿Fácil, verdad? En unos 3 minutos tienes un slider profesional sin tocar la plantilla. Si tienes alguna duda, revisa que hayas pegado el código completo y que el gadget esté en una zona visible. Recuerda que el slider obtiene las 10 publicaciones más recientes, si tienes menos se mostrarán las que existan. El diseño es 100% responsivo y se ve perfecto en móvil.

🌟 Tutorial creado por Ayudadeblogger.com – especialistas en recursos para Blogger. Disfruta este slider y no olvides explorar los enlaces para más herramientas.
¿Necesitas ayuda? Escríbenos sin compromiso.

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: Slider Carrusel

Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.