Slider Carrusel para Blogger
Cómo Crear un Carrusel de Imágenes con Enlaces en Blogger (Fácil y Profesional)
¿Quieres mostrar una galería de productos, capturas de pantalla de tus tutoriales o imágenes destacadas que enlacen a otros artículos? Un carrusel o slideshow de imágenes clickeables es la solución perfecta para ahorrar espacio y mantener un diseño atractivo. En este tutorial te enseñaré a insertarlo en Blogger de manera sencilla, segura y sin complicaciones.
📌 Antes de empezar: ¿Qué necesitas?
Solo necesitas acceso a tu blog de Blogger y los enlaces (URLs) de los videos de YouTube que deseas incluir. No se requieren conocimientos de programación, solo copiar y pegar.
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:
🚀 Paso a Paso: Insertar el Gadget HTML
Sigue estas simples instrucciones al pie de la letra y en menos de 7 minutos tendrás tu carrusel de imágenes funcionando.
- Accede a tu panel de Blogger.com e inicia sesión con tu cuenta de Google.
- En el menú de la izquierda, haz clic en "Diseño" (o "Layout").
- Dentro de la sección de diseño, busca un área donde quieras que aparezca el carrusel (por ejemplo, la barra lateral o debajo del header) y haz clic en "Agregar un Gadget".
- Se abrirá una ventana. Busca y selecciona el gadget que dice "HTML/Javascript".
- En el campo de título, puedes poner algo como: 🌟 Nuestras Recomendaciones (o déjalo vacío si prefieres).
- En el área de contenido, vas a copiar y pegar TODO el código que está debajo de estas instrucciones.
<style> hasta el final del <script>.
<style>
/* ===== CARRUSEL DE IMÁGENES CON ENLACES (ESTILOS PROFESIONALES) ===== */
.b-slider-container {
width: 100%;
max-width: 1200px;
margin: 40px auto 20px auto;
position: relative;
overflow: hidden;
background: #0b1219; /* Fondo oscuro elegante */
border-radius: 24px;
box-shadow: 0 20px 30px -10px rgba(0,0,0,0.3);
border: 1px solid rgba(255,255,255,0.05);
padding: 10px 0; /* Pequeño padding interior */
}
.b-slider-wrapper {
display: flex;
transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1);
cursor: grab;
}
.b-slide {
min-width: 100%; /* Por defecto móvil: 1 imagen */
padding: 10px;
box-sizing: border-box;
transition: min-width 0.2s;
}
/* Estilo para los enlaces que envuelven las imágenes */
.b-slide a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
border-radius: 18px; /* Bordes redondeados para el contenedor del enlace */
overflow: hidden; /* Esconde cualquier desborde de la imagen */
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Efecto de escala al pasar el ratón sobre la imagen */
.b-slide a:hover {
transform: scale(1.02);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
border-color: rgba(59, 130, 246, 0.5);
}
.b-slide img {
width: 100%;
height: 100%;
display: block;
aspect-ratio: 16 / 9; /* Relación de aspecto profesional */
object-fit: cover; /* La imagen cubre todo el espacio sin deformarse */
background: #1e2a3a; /* Color de fondo mientras carga */
border: none;
}
/* Botones de navegación modernos */
.b-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(25, 35, 45, 0.85);
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.2);
width: 52px;
height: 52px;
border-radius: 50%;
font-size: 28px;
font-weight: 300;
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
box-shadow: 0 6px 14px rgba(0,0,0,0.3);
z-index: 10;
line-height: 1;
}
.b-nav-btn:hover {
background: #3b82f6;
border-color: #3b82f6;
transform: translateY(-50%) scale(1.1);
}
.b-prev { left: 16px; }
.b-next { right: 16px; }
/* Responsividad: Tablets (2 imágenes) */
@media (min-width: 640px) {
.b-slide { min-width: 50%; }
}
/* Responsividad: Escritorio (3 imágenes) */
@media (min-width: 1024px) {
.b-slide { min-width: 33.333%; }
}
/* Puntos indicadores (UX mejorada) */
.b-dots {
display: flex;
justify-content: center;
gap: 10px;
padding: 15px 0 10px 0;
background: transparent;
}
.b-dot {
width: 10px;
height: 10px;
border-radius: 20px;
background: rgba(255,255,255,0.3);
border: none;
cursor: pointer;
transition: all 0.2s;
padding: 0;
}
.b-dot.active {
background: #3b82f6;
width: 24px;
}
</style>
<div class="b-slider-container" id="bSlider">
<div class="b-slider-wrapper" id="bWrapper">
<!--
=======================================================
💥 ZONA DE PERSONALIZACIÓN: AÑADE TUS IMÁGENES AQUÍ
=======================================================
Instrucciones:
1. Reemplaza "URL_DE_TU_IMAGEN_1.jpg" con el enlace directo a tu imagen.
2. Reemplaza "URL_DE_TU_ENLACE_1.html" con la dirección a la que quieres que vaya.
3. Cambia "Título de la imagen 1" por un texto descriptivo (importante para SEO y accesibilidad).
4. Para añadir más imágenes, copia un bloque DIV completo y pégalo a continuación.
-->
<div class="b-slide">
<a href="URL_DE_TU_ENLACE_1.html" target="_blank" rel="noopener noreferrer">
<img src="URL_DE_TU_IMAGEN_1.jpg" alt="Título descriptivo para la imagen 1" loading="lazy">
</a>
</div>
<div class="b-slide">
<a href="URL_DE_TU_ENLACE_2.html" target="_blank" rel="noopener noreferrer">
<img src="URL_DE_TU_IMAGEN_2.jpg" alt="Título descriptivo para la imagen 2" loading="lazy">
</a>
</div>
<div class="b-slide">
<a href="URL_DE_TU_ENLACE_3.html" target="_blank" rel="noopener noreferrer">
<img src="URL_DE_TU_IMAGEN_3.jpg" alt="Título descriptivo para la imagen 3" loading="lazy">
</a>
</div>
<div class="b-slide">
<a href="URL_DE_TU_ENLACE_4.html" target="_blank" rel="noopener noreferrer">
<img src="URL_DE_TU_IMAGEN_4.jpg" alt="Título descriptivo para la imagen 4" loading="lazy">
</a>
</div>
<!-- Puedes añadir más copiando la estructura de arriba -->
</div> <!-- Cierre de b-slider-wrapper -->
<button class="b-nav-btn b-prev" id="prevBtn" aria-label="Imagen anterior">❮</button>
<button class="b-nav-btn b-next" id="nextBtn" aria-label="Imagen siguiente">❯</button>
<!-- Puntos de navegación (se generan automáticamente) -->
<div class="b-dots" id="sliderDots"></div>
</div> <!-- Cierre de b-slider-container -->
<script>
(function() {
// Script adaptado para el carrusel de imágenes
const wrapper = document.getElementById('bWrapper');
const slides = document.querySelectorAll('.b-slide');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const dotsContainer = document.getElementById('sliderDots');
if (!wrapper || !slides.length) return; // Seguridad
let currentIndex = 0;
let visibleSlides = getVisibleSlides();
// Crear dots (puntos) de navegación
function createDots() {
if (!dotsContainer) return;
dotsContainer.innerHTML = '';
const totalSlides = slides.length;
// El número de dots se basa en cuántos grupos de slides visibles hay
const totalDots = Math.ceil(totalSlides / visibleSlides);
for (let i = 0; i < totalDots; i++) {
const dot = document.createElement('button');
dot.classList.add('b-dot');
dot.setAttribute('data-index', i);
dot.addEventListener('click', function() {
goToSlide(i * visibleSlides);
});
dotsContainer.appendChild(dot);
}
updateDots();
}
function updateDots() {
if (!dotsContainer) return;
const dots = dotsContainer.querySelectorAll('.b-dot');
const activeDotIndex = Math.floor(currentIndex / visibleSlides);
dots.forEach((dot, index) => {
dot.classList.toggle('active', index === activeDotIndex);
});
}
// Función para calcular cuántos slides se ven según el ancho
function getVisibleSlides() {
if (window.innerWidth >= 1024) return 3;
if (window.innerWidth >= 640) return 2;
return 1;
}
// Función principal para mover el slide
function moveSlide(direction) {
const newVisible = getVisibleSlides();
if (newVisible !== visibleSlides) {
visibleSlides = newVisible;
// Reajustar currentIndex con el nuevo número de slides visibles
if (currentIndex > slides.length - visibleSlides) {
currentIndex = Math.max(0, slides.length - visibleSlides);
}
}
const maxIndex = Math.max(0, slides.length - visibleSlides);
let newIndex = currentIndex + direction;
if (newIndex < 0) newIndex = 0;
if (newIndex > maxIndex) newIndex = maxIndex;
currentIndex = newIndex;
const offset = -currentIndex * (100 / visibleSlides);
wrapper.style.transform = `translateX(${offset}%)`;
updateDots();
}
function goToSlide(index) {
const newVisible = getVisibleSlides();
visibleSlides = newVisible;
const maxIndex = slides.length - visibleSlides;
currentIndex = Math.min(index, maxIndex);
if (currentIndex < 0) currentIndex = 0;
const offset = -currentIndex * (100 / visibleSlides);
wrapper.style.transform = `translateX(${offset}%)`;
updateDots();
}
// Event listeners
if (prevBtn) prevBtn.addEventListener('click', () => moveSlide(-1));
if (nextBtn) nextBtn.addEventListener('click', () => moveSlide(1));
// Recalcular en caso de redimensionar la ventana (responsive)
let resizeTimer;
window.addEventListener('resize', function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
const newVisible = getVisibleSlides();
if (newVisible !== visibleSlides) {
visibleSlides = newVisible;
goToSlide(currentIndex); // Reajusta la posición
// Re-crear dots porque el número de grupos puede haber cambiado
createDots();
}
}, 150);
});
// Inicializar
goToSlide(0);
createDots();
// --- Arrastre con mouse (Opcional - mejora UX en escritorio) ---
let isDown = false;
let startX;
let startScrollLeft; // Cambiamos la lógica para que no sea demasiado sensible
wrapper.addEventListener('mousedown', (e) => {
isDown = true;
wrapper.style.cursor = 'grabbing';
startX = e.pageX - wrapper.offsetLeft;
startScrollLeft = currentIndex; // Guardamos el índice actual
});
wrapper.addEventListener('mouseleave', () => {
isDown = false;
wrapper.style.cursor = 'grab';
});
wrapper.addEventListener('mouseup', () => {
isDown = false;
wrapper.style.cursor = 'grab';
});
wrapper.addEventListener('mousemove', (e) => {
if (!isDown) return;
e.preventDefault();
const x = e.pageX - wrapper.offsetLeft;
const walk = (x - startX); // Distancia arrastrada
// Si arrastra más de 70px, cambia de slide (para evitar cambios accidentales)
if (Math.abs(walk) > 70) {
if (walk > 0) {
moveSlide(-1); // Arrastre a la derecha -> imagen anterior
} else {
moveSlide(1); // Arrastre a la izquierda -> imagen siguiente
}
isDown = false; // Para que no se dispare múltiples veces
wrapper.style.cursor = 'grab';
}
});
// --- Fin de arrastre con mouse ---
})();
</script>
🔧 Personalización: Cómo cambiar las imágenes y sus enlaces
Es muy fácil. Dentro del código, busca la sección que tiene el comentario "ZONA DE PERSONALIZACIÓN". Ahí encontrarás bloques como este para cada imagen:
<div class="b-slide">
<a href="URL_DE_TU_ENLACE_1.html" target="_blank">
<img src="URL_DE_TU_IMAGEN_1.jpg" alt="Título descriptivo" loading="lazy">
</a>
</div>
Solo tienes que modificar tres partes por cada imagen:
URL_DE_TU_IMAGEN_1.jpg: Reemplázalo con la dirección web (URL) directa de tu imagen. Puedes subir tus imágenes a Blogger, o usar servicios como Imgur o Postimages para obtener el enlace directo.URL_DE_TU_ENLACE_1.html: Cámbialo por la URL de la página a la que quieres que dirija la imagen (puede ser una entrada de tu blog, otro sitio web, etc.).Título descriptivo para la imagen 1: Escribe un texto alternativo que describa la imagen. Esto es muy importante para el SEO (posicionamiento en buscadores) y la accesibilidad para personas con discapacidad visual.
Para agregar más imágenes, simplemente copia un bloque completo <div class="b-slide">...</div> y pégalo justo encima de los demás, dentro del b-slider-wrapper.
📱 ¿Es Responsive? ¡Por supuesto!
Hemos programado el carrusel para que se adapte perfectamente a cualquier pantalla:
- Móviles: Se ve 1 imagen a la vez, ocupando todo el ancho.
- Tablets: Se ven 2 imágenes lado a lado.
- Escritorio: Se ven 3 imágenes en una cuadrícula deslizable.
🧠 Consejo de Pro: Optimización de velocidad y estética
Para la velocidad: El código ya incluye el atributo loading="lazy" en las imágenes. Esto hace que las imágenes solo se carguen cuando el usuario está a punto de verlas, mejorando el tiempo de carga inicial de tu blog.
Para un look más profesional: Asegúrate de que todas tus imágenes tengan la misma relación de aspecto (por ejemplo, 16:9 o 4:3). El código ya fuerza un aspecto de 16:9, pero si usas imágenes con otras proporciones, podrían recortarse ligeramente para llenar el espacio sin deformarse (gracias a object-fit: cover).
🤔 Preguntas Frecuentes
¿Puedo ponerlo en una entrada en lugar de un gadget?
Sí, también funciona perfectamente. Solo copia el código en la vista HTML de una nueva entrada. La ventaja de ponerlo en un gadget es que aparecerá en la ubicación que elijas de todo tu blog (por ejemplo, siempre en la barra lateral).
¿Qué tipo de enlaces puedo poner?
Cualquier URL válida. Puede ser un enlace a una entrada de tu propio blog, a una página de afiliados, a un sitio externo, etc. El atributo target="_blank" hace que el enlace se abra en una nueva pestaña, lo cual es ideal para no perder a tu visitante.
¿El código es seguro para mi blog?
Absolutamente. Es código HTML, CSS y Javascript estándar, sin peticiones a servidores externos ni recopilación de datos. El slider funciona de manera independiente y segura.
🎯 ¿Ves qué fácil? En pocos minutos has añadido un elemento profesional y funcional a tu blog de Blogger. Ahora puedes mostrar tus imágenes destacadas con estilo y dirigir tráfico a las páginas que más te interesan. ¡Nos vemos en el próximo tutorial!
hola, yo tengo instalado un carrusel que me muestra las entradas recientes, pero me gustaría saber como hago para que ese mismo carrusel en vez de mostrarme las entradas recientes me muestra las más populares? gracias y saludos :)
ResponderEliminarHola, quería saber como puedo hacer para que el carousel no se mueva solo y también quitar que sea infinito?
ResponderEliminarEl codigo esta actualizado, puede realizar este tutorial con facilidad.
ResponderEliminar