Tutorial: Cómo Insertar un Slideshow de Videos de YouTube en Blogger
🎬 Cómo Crear un Slideshow de Videos de YouTube en Blogger (Fácil y 100% Responsive)
¿Quieres mostrar varios videos de YouTube en tu blog sin que ocupen todo el espacio y de una forma visualmente atractiva? Un carrusel o slideshow de videos es la solución perfecta. 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 5 minutos tendrás tu slideshow 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 slider (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: 📺 Videos Destacados (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>
/* ===== SLIDESHOW DE VIDEOS (ESTILOS MEJORADOS) ===== */
.b-slider-container {
width: 100%;
max-width: 1200px; /* Un poco más amplio */
margin: 40px auto 20px auto;
position: relative;
overflow: hidden;
background: #0b1219; /* Fondo más oscuro y 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);
}
.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 video */
padding: 8px;
box-sizing: border-box;
transition: min-width 0.2s;
}
.b-video-embed {
width: 100%;
height: 100%;
aspect-ratio: 16 / 9;
border: none;
border-radius: 16px; /* Bordes más suaves */
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
background: #1e2a3a; /* Placeholder elegante */
}
/* Botones de navegación (más 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 videos) */
@media (min-width: 640px) {
.b-slide { min-width: 50%; }
}
/* Responsividad: Escritorio (3 videos) */
@media (min-width: 1024px) {
.b-slide { min-width: 33.333%; }
}
/* Puntos indicadores (Opcional pero mejora UX) */
.b-dots {
display: flex;
justify-content: center;
gap: 10px;
padding: 15px 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;
}
.b-dot.active {
background: #3b82f6;
width: 24px;
}
</style>
<div class="b-slider-container" id="bSlider">
<div class="b-slider-wrapper" id="bWrapper">
<!-- ↓ AGREGA TUS VIDEOS AQUÍ: Solo cambia el ID del video de YouTube -->
<div class="b-slide"><iframe class="b-video-embed" src="https://www.youtube.com/embed/cjj2E9dwjjU" title="Video 1" loading="lazy" allowfullscreen></iframe></div>
<div class="b-slide"><iframe class="b-video-embed" src="https://www.youtube.com/embed/Z9LQhTPhAnY" title="Video 2" loading="lazy" allowfullscreen></iframe></div>
<div class="b-slide"><iframe class="b-video-embed" src="https://www.youtube.com/embed/3JZ_D3ELwOQ" title="Video 3" loading="lazy" allowfullscreen></iframe></div>
<div class="b-slide"><iframe class="b-video-embed" src="https://www.youtube.com/embed/9bZkp7q19f0" title="Video 4" loading="lazy" allowfullscreen></iframe></div>
<!-- Puedes añadir más copiando la línea de arriba y cambiando la URL -->
</div>
<button class="b-nav-btn b-prev" id="prevBtn" aria-label="Video anterior">❮</button>
<button class="b-nav-btn b-next" id="nextBtn" aria-label="Video siguiente">❯</button>
<!-- Puntos de navegación opcionales -->
<div class="b-dots" id="sliderDots"></div>
</div>
<script>
(function() {
// Versión mejorada del script con soporte para dots y más estabilidad
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;
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;
// Ajustar currentIndex para que no se pase del límite con el nuevo visibleSlides
if (currentIndex > slides.length - visibleSlides) {
currentIndex = Math.max(0, slides.length - visibleSlides);
}
}
const maxIndex = 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
prevBtn.addEventListener('click', () => moveSlide(-1));
nextBtn.addEventListener('click', () => moveSlide(1));
// Recalcular en caso de redimensionar la ventana (para 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
}
}, 150);
});
// Inicializar
goToSlide(0);
createDots(); // Inicializar dots
// Arrastre con mouse (opcional, mejora UX)
let isDown = false;
let startX;
let scrollLeft;
wrapper.addEventListener('mousedown', (e) => {
isDown = true;
wrapper.style.cursor = 'grabbing';
startX = e.pageX - wrapper.offsetLeft;
scrollLeft = currentIndex; // Guardamos í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) * 0.5; // Sensibilidad
if (Math.abs(walk) > 50) { // Si arrastra lo suficiente, cambia slide
if (walk > 0) {
moveSlide(-1);
} else {
moveSlide(1);
}
isDown = false; // Para que no se dispare múltiples veces
}
});
})();
</script>
🔧 Personalización: Cómo cambiar los videos
Es muy fácil. Busca dentro del código las líneas que contienen <div class="b-slide">...</div>. Cada una representa un video.
En la parte de src="https://www.youtube.com/embed/XXXXXXX", solo tienes que reemplazar XXXXXXX por el ID de tu video de YouTube favorito.
¿Dónde encuentro el ID? En la URL del video: https://www.youtube.com/watch?v=cjj2E9dwjjU → El ID es cjj2E9dwjjU.
Para agregar más videos, simplemente copia una línea completa de <div class="b-slide">...</div> y pégala justo encima de las demás.
📱 ¿Es Responsive? ¡Por supuesto!
Hemos programado el slideshow para que se adapte perfectamente a cualquier pantalla:
- Móviles: Se ve 1 video a la vez, ocupando todo el ancho.
- Tablets: Se ven 2 videos lado a lado.
- Escritorio: Se ven 3 videos en una cuadrícula deslizable.
🧠 Consejo de Pro: Optimización de velocidad
Si planeas añadir muchos videos (más de 5), te recomiendo activar la carga diferida o "lazy loading". Esto hará que tu blog cargue más rápido porque los videos solo se cargarán cuando el usuario esté por verlos.
Simplemente añade el atributo loading="lazy" dentro de la etiqueta <iframe>. Así:
<iframe class="b-video-embed" src="..." loading="lazy" ...>
En el código que te he proporcionado, ya viene incluido por defecto. ¡Tu blog será rapidísimo!
🤔 Preguntas Frecuentes
¿Puedo ponerlo en una entrada en lugar de un gadget?
Sí, también funciona. Solo copia el código en la vista HTML de una nueva entrada. Sin embargo, ponerlo en un gadget te permite que aparezca en todo el blog (por ejemplo, en la barra lateral).
¿Los videos se reproducen automáticamente?
No, y es mejor así. La reproducción automática suele ser molesta para los usuarios y además muchos navegadores la bloquean. El usuario debe hacer clic en el video para verlo.
¿El código es seguro para mi blog?
Absolutamente. Es código HTML, CSS y Javascript estándar. No hace peticiones a servidores externos ni recopila datos. Solo usa el reproductor incrustado de YouTube.
🎯 ¿Ves qué fácil? En pocos minutos has mejorado la estética y funcionalidad de tu blog de Blogger. Ahora presume tus videos favoritos con estilo. ¡Nos vemos en el próximo tutorial!
tampoco logro activarlo en mi blog :(
ResponderEliminar