Como insertar un Slider Carrusel en Blogger
Slider Carrusel para Blogger: últimas publicaciones (fácil y sin errores)
¿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 funcionalA continuación puede ver su demostración en el siguiente blog
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.
- Ve a Tema en el menú de tu panel de Blogger.
- Haz clic en Crear copia de seguridad (ubicado en la esquina superior derecha).
- 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:
⚡ 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
🔹 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)
📋 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>
📚 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:
🧠 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.
17 comentarios: