🚀 Cómo crear un slider carrusel automático por etiquetas en Blogger (tutorial simple)
¿Necesitas un carrusel de entradas dinámico que muestre automáticamente posts de una categoría específica? Este truco para Blogger es tan sencillo como copiar un código y cambiar el nombre de una etiqueta. El slider se genera al instante con tus artículos, sin complicaciones. Además, incluye efectos suaves, diseño responsive y miniaturas nítidas. Ideal para destacar tutoriales, reviews o noticias.
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
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:
⚙️ El truco: slider por etiqueta con solo editar una línea
El código que te comparto es un carrusel moderno para Blogger que utiliza la potencia de los feeds nativos. Solo deberás sustituir el texto "Tecnologia" por la etiqueta que desees (por ejemplo: "Recetas", "Viajes", "Reseñas"). El slider extraerá automáticamente las entradas asociadas, con imagen destacada, título y resumen. Eso sí, todo desde el propio blog, sin bases de datos externas.
✨ Novedad en este tutorial: las imágenes se muestran en alta resolución sin distorsión gracias al parámetro /w640/ y el uso de object-fit: cover. También hemos añadido botones suaves, sombras elegantes y un track deslizante con efecto cubico. Todo pensado para que tus visitantes disfruten un slider profesional.
📥 Instalación paso a paso (solo 7 pasos)
Sigue estas instrucciones visuales y en menos de 5 minutos tendrás el carrusel de etiquetas funcionando en tu blog. No necesitas saber programación, solo copiar y pegar.
- 1 Accede a Blogger e inicia sesión en la cuenta de tu blog.
- 2 En el panel izquierdo, haz clic en Diseño.
- 3 Presiona "Añadir un gadget" en la zona donde quieras ubicar el slider (por ejemplo, en la sidebar o debajo del header).
- 4 Se abrirá la galería de gadgets; elige "HTML/Javascript". Se te mostrará un cuadro de texto. Allí vas a copiar y pegar el siguiente código completo (incluye estilos, estructura y JavaScript).
<!-- Modern Blogger Etiquetas Carousel V2.0 - Resolution & Text -->
<style>
:root {
--carousel-bg: #ffffff;
--card-bg: #ffffff;
--text-main: #2c3e50;
--text-dim: #7f8c8d;
--accent-color: #3498db;
--transition: all 0.3s ease;
}
#modern-slider-container {
position: relative;
width: 100%;
margin: 20px auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.ms-viewport {
overflow: hidden;
margin: 0 45px;
}
.ms-track {
display: flex;
gap: 15px;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
padding: 15px 5px;
}
/* Estructura de la Tarjeta */
.ms-item {
min-width: calc(20% - 12px); /* 5 items en escritorio */
background: var(--card-bg);
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
display: flex;
flex-direction: column;
overflow: hidden;
transition: var(--transition);
border: 1px solid #eee;
}
.ms-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}
/* Imagen sin distorsión */
.ms-thumb-wrapper {
position: relative;
width: 100%;
padding-top: 60%; /* Relación de aspecto 16:10 */
background: #f0f0f0;
overflow: hidden;
}
.ms-thumb {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* Evita que la imagen se estire o distorsione */
transition: transform 0.5s ease;
}
/* Contenido de texto */
.ms-content {
padding: 12px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.ms-title {
font-size: 14px;
font-weight: 700;
color: var(--text-main);
margin-bottom: 8px;
line-height: 1.3;
/* Truncado a 2 líneas */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
height: 36px;
}
.ms-snippet {
font-size: 12px;
color: var(--text-dim);
line-height: 1.4;
/* Truncado a 2 líneas */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
height: 34px;
}
/* Botones Navegación */
.ms-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 38px;
height: 38px;
background: #fff;
border: none;
border-radius: 50%;
cursor: pointer;
z-index: 10;
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: var(--text-main);
transition: var(--transition);
}
.ms-btn:hover {
background: var(--accent-color);
color: white;
}
.ms-btn-prev { left: 0; }
.ms-btn-next { right: 0; }
/* Responsive */
@media (max-width: 1024px) { .ms-item { min-width: calc(33.33% - 10px); } }
@media (max-width: 768px) { .ms-item { min-width: calc(50% - 10px); } }
@media (max-width: 480px) {
.ms-item { min-width: calc(100% - 10px); }
.ms-viewport { margin: 0 40px; }
}
</style>
<div id="modern-slider-container">
<button class="ms-btn ms-btn-prev" aria-label="Anterior" onclick="moveSlider(-1)">❮</button>
<div class="ms-viewport">
<div class="ms-track" id="slider-track">
<!-- Cargando... -->
</div>
</div>
<button class="ms-btn ms-btn-next" aria-label="Siguiente" onclick="moveSlider(1)">❯</button>
</div>
<script>
const config = {
label: "Tecnologia", // Cambia por tu etiqueta
maxPosts: 10,
noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOAzh7i4k4VMcpDZikLZRR3y-qF0ZqQxCU43UA8bMgOEyQbHL32LjBjOhrnt37Jhyphenhyphen52Diio96TB2On-qFWa1oZeIoQWWrNvYG5fFXuovwjE_w5_8M16A4yoXSYN_TfNnGD-66A5Nyzmos/s1600/no+image.jpg"
};
let currentX = 0;
// Función para limpiar HTML y obtener resumen limpio
function cleanText(str, limit) {
return str.replace(/<[^>]*>?/gm, '').substring(0, limit) + '...';
}
// Función para obtener imagen HD
function getHighResImg(url) {
if (!url) return config.noImage;
// Cambia s72-c, s1600, etc por w640 (calidad optimizada)
return url.replace(/\/s[0-9]+-(c|w|h|p)-?.*?\//, '/w640/');
}
function renderSlider(json) {
const track = document.getElementById('slider-track');
let html = '';
if (!json.feed.entry) return;
json.feed.entry.forEach(entry => {
const title = entry.title.$t;
const url = entry.link.find(l => l.rel === 'alternate').href;
// Obtener imagen de miniatura o del contenido
let rawImg = entry.media$thumbnail ? entry.media$thumbnail.url : '';
if(!rawImg && entry.content) {
const match = entry.content.$t.match(/src="(.*?)"/);
rawImg = match ? match[1] : '';
}
const thumb = getHighResImg(rawImg);
// Obtener resumen
const summary = entry.summary ? entry.summary.$t : (entry.content ? entry.content.$t : "");
const snippet = cleanText(summary, 100);
html += `
<div class="ms-item">
<a href="${url}" style="text-decoration:none; color:inherit;">
<div class="ms-thumb-wrapper">
<img src="${thumb}" class="ms-thumb" alt="${title}" loading="lazy">
</div>
<div class="ms-content">
<div class="ms-title">${title}</div>
<div class="ms-snippet">${snippet}</div>
</div>
</a>
</div>
`;
});
track.innerHTML = html;
}
function moveSlider(direction) {
const track = document.getElementById('slider-track');
const viewport = document.querySelector('.ms-viewport');
const items = track.querySelectorAll('.ms-item');
if (items.length === 0) return;
const itemWidth = items[0].offsetWidth + 15; // ancho + gap
const maxScroll = track.scrollWidth - viewport.offsetWidth;
currentX += (itemWidth * direction);
// Límites
if (currentX < 0) currentX = 0;
if (currentX > maxScroll) currentX = maxScroll;
track.style.transform = `translateX(-${currentX}px)`;
}
// Carga del Feed
(function() {
const script = document.createElement('script');
script.src = `/feeds/posts/default/-/${config.label}?alt=json-in-script&max-results=${config.maxPosts}&callback=renderSlider`;
document.body.appendChild(script);
})();
</script>
- 5 Personaliza la etiqueta: Dentro del código, localiza la línea
const config = { label: "Tecnologia", ... y cambia "Tecnologia" por la etiqueta de tu blog (ej: "Cocina", "Viajes", "Reseñas"). Respeta las mayúsculas y minúsculas tal cual las escribiste en tus entradas.
- 6 Haz clic en Guardar (abajo a la izquierda).
- 7 ¡Listo! Visita tu blog y verás el carrusel funcionando. Las entradas con esa etiqueta aparecerán automáticamente con imagen y descripción. ¿Fácil, verdad?
🧠 ¿Cómo funciona este slider por etiquetas?
El gadget utiliza el feed nativo de Blogger en formato JSON. Hace una petición a /feeds/posts/default/-/[ETIQUETA] y obtiene las últimas entradas. Luego, gracias al renderSlider, construye las tarjetas. Los botones actualizan la transformación CSS para desplazar el track. El código incluye una función getHighResImg que optimiza las miniaturas a 640px de ancho, evitando píxeles borrosos.
📌 Truco extra: regulador automático
El slider es completamente automático, pero si deseas que se desplace solo (autoplay), puedes añadir un pequeño intervalo. En este tutorial hemos preferido mantener la versión manual para que el usuario controle el ritmo. Sin embargo, si quieres activar el autoplay, inserta este fragmento dentro del script:
// autoplay opcional (cada 5 segundos)
setInterval(() => moveSlider(1), 5000);
Coloca ese código al final de la función anónima, justo antes del cierre. ¡Pero cuidado! Si hay pocas entradas, no se deslizará infinitamente gracias a los límites currentX.
❓ Preguntas frecuentes (ayuda rápida)
- ¿Qué pasa si una entrada no tiene imagen? El slider usará una imagen por defecto "no image" incluida en el código (puedes cambiarla por otra URL).
- ¿Puedo poner más de 10 entradas? Sí, solo cambia
maxPosts: 10 por el número deseado. Te recomendamos no pasar de 15 para mantener la velocidad.
- El slider no se ve bien en móvil Los estilos ya son responsive, pero si notas algo extraño, verifica que no haya otros CSS que interfieran.
- ¿Necesito conocimientos de HTML? No, solo copiar y pegar, además de cambiar el nombre de la etiqueta. ¡Eso es todo!
#Blogger #SliderEtiquetas #TutorialBlogger #CarruselAutomático
119 comentarios: