Tutorial: Gadget Feature Tabs con contenido dinámico para Blogger
Imagina un componente que funciona como una mezcla entre tabs + acordeón + preview visual sincronizado. Haces clic en un título, se activa visualmente (highlight), muestra su descripción y cambia la imagen principal, mientras los demás ítems se cierran automáticamente. Esto mejora radicalmente la experiencia de usuario sin recargar la página.
• En escritorio: dos columnas con la imagen «fijada» visualmente mientras lees.
• En móvil: se transforma solo en un acordeón apilado, con la imagen justo debajo del texto.
• Microinteracciones premium: efecto hover con desplazamiento lateral, curva de aceleración personalizada (cubic-bezier) que evita animaciones bruscas.
• Cero dependencias externas: No usa jQuery, ni fuentes externas pesadas, ni librerías de terceros. Tu Core Web Vitals seguirá intacto.
¿Por qué esta es la mejor solución para Blogger?
- Cero dependencias: No necesitas modificar la plantilla HTML de tu blog. Solo copiar y pegar en un gadget.
- Escalable: Si deseas agregar una cuarta o quinta característica, solo copias el bloque HTML del feature-item y añades la imagen; el JavaScript detecta el nuevo elemento automáticamente.
- Totalmente responsive: Se adapta sin necesidad de configurar parámetros complejos.
- Animación orgánica: Las transiciones usan curvas cubic-bezier personalizadas, nada aparece de forma brusca.
Nota Importante
Este tutorial está actualizado, 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:
Tutorial paso a paso
Ingresa a tu cuenta de Blogger y selecciona el blog donde deseas instalar el gadget.
En el menú lateral izquierdo haz clic en Diseño (Layout).
Haz clic en "Añadir un gadget" en la zona donde quieras mostrar las pestañas (sidebar, después de entradas, footer). Elige la opción HTML/Javascript.
Copia y pega exactamente este código dentro del gadget:
<style>
/* Configuración Premium */
.saas-container { display: flex; gap: 60px; max-width: 1100px; margin: 60px auto; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; align-items: flex-start; padding: 20px; }
/* Efecto "Apple" en imagen */
.saas-left { flex: 1.2; min-height: 400px; position: relative; display: flex; align-items: center; justify-content: center; }
.saas-left img {
max-width: 95%; border-radius: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.08);
position: absolute; opacity: 0;
transform: translateY(20px) scale(0.98);
transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.saas-left img.active { opacity: 1; transform: translateY(0) scale(1); }
.saas-right { flex: 0.8; }
/* Estilo de ítems premium */
.feature-item {
cursor: pointer; padding: 24px; border-radius: 16px; margin-bottom: 20px;
background: #fff; transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
border: 1px solid rgba(0,0,0,0.05); position: relative; overflow: hidden;
}
.feature-item:hover { transform: translateX(10px); border-color: rgba(66, 133, 244, 0.3); }
/* Línea lateral animada */
.feature-item::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
background: #4285f4; transform: scaleY(0); transition: transform 0.4s ease;
}
.feature-item.active { background: #fdfdfd; border-color: #e8e8e8; box-shadow: 0 10px 20px rgba(0,0,0,0.03); }
.feature-item.active::before { transform: scaleY(1); }
.feature-item h3 { margin: 0 0 10px 0; font-size: 20px; color: #1d1d1f; transition: color 0.3s; }
.feature-item.active h3 { color: #4285f4; }
.feature-desc {
max-height: 0; overflow: hidden; transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
color: #86868b; font-size: 16px; line-height: 1.6; opacity: 0;
}
.feature-item.active .feature-desc { max-height: 150px; opacity: 1; }
.mobile-img-container { display: none; margin-top: 20px; }
/* Ajuste responsivo */
@media (max-width: 768px) {
.saas-container { flex-direction: column; gap: 30px; }
.saas-left { display: none; }
.mobile-img-container { display: block; }
.mobile-img-container img { border-radius: 12px; width: 100%; }
.feature-item:hover { transform: none; }
}
</style>
<div class="saas-container">
<div class="saas-left" id="desktop-visual">
<img src="https://tu-dominio.com/imagen-caracteristica-1.jpg" class="active" data-id="1" />
<img src="https://tu-dominio.com/imagen-caracteristica-2.jpg" data-id="2" />
<img src="https://tu-dominio.com/imagen-caracteristica-3.jpg" data-id="3" />
</div>
<div class="saas-right">
<div class="feature-item active" onclick="activateFeature(1)">
<h3>Diseñado para la colaboración</h3>
<div class="feature-desc">Colabora en tiempo real con tu equipo, visualiza cambios al instante y mantente sincronizado.</div>
<div class="mobile-img-container" id="mobile-img-1"></div>
</div>
<div class="feature-item" onclick="activateFeature(2)">
<h3>Plantillas prediseñadas</h3>
<div class="feature-desc">Ahorra tiempo utilizando estructuras optimizadas que se adaptan a tus necesidades específicas.</div>
<div class="mobile-img-container" id="mobile-img-2"></div>
</div>
<div class="feature-item" onclick="activateFeature(3)">
<h3>Integración sólida</h3>
<div class="feature-desc">Conecta perfectamente con Google Workspace y otras herramientas esenciales de tu flujo de trabajo.</div>
<div class="mobile-img-container" id="mobile-img-3"></div>
</div>
</div>
</div>
<script>
function activateFeature(id) {
// Actualizar estados
document.querySelectorAll('.feature-item').forEach((el, index) => {
el.classList.toggle('active', (index + 1) === id);
});
// Animación escritorio
document.querySelectorAll('#desktop-visual img').forEach(img => {
img.classList.toggle('active', parseInt(img.getAttribute('data-id')) === id);
});
// Animación móvil (fade in suave)
if (window.innerWidth <= 768) {
const imgElement = document.querySelector(`#desktop-visual img[data-id="${id}"]`);
const targetContainer = document.getElementById(`mobile-img-${id}`);
document.querySelectorAll('.mobile-img-container').forEach(c => c.innerHTML = '');
const clone = imgElement.cloneNode(true);
clone.style.display = 'block';
clone.style.opacity = '1';
clone.style.transform = 'none';
targetContainer.appendChild(clone);
}
}
window.onload = () => { if(window.innerWidth <= 768) activateFeature(1); };
</script>
Imágenes: Encontrarás 3 URLs de ejemplo (con https://tu-dominio.com/imagen-caracteristica-1.jpg). Elimínalas y reemplázalas por tus propias URLs de imagen.
⚠️ Recomendación: Usa imágenes con un ancho mínimo de 800px y formato WebP o JPG optimizado.
Títulos: Cambia los textos dentro de <h3> por los tuyos.
Descripciones: Reemplaza el contenido de <div class="feature-desc"> por descripciones reales.
Más ítems: Si necesitas agregar más, copia este bloque y cambia el número:
<div class="feature-item" onclick="activateFeature(4)">
<h3>Tu nuevo título</h3>
<div class="feature-desc">Tu nueva descripción.</div>
<div class="mobile-img-container" id="mobile-img-4"></div>
</div>
Y dentro de .saas-left agrega: <img src="URL_IMAGEN_4.jpg" data-id="4" />
Haz clic en Guardar Ubica el gadget donde mejor se visualice (normalmente después de la entrada o en la barra lateral). Ahora revisa tu blog de Blogger y mira cómo funciona este nuevo Gadget Feature Tabs con contenido dinámico.
En escritorio → imagen fija a la derecha, texto animado a la izquierda.
En móvil → todo se apila en un acordeón fluido.
Características técnicas de alto valor
- Microinteracciones: Efectos hover con desplazamiento lateral sutil que invitan a la interacción.
- Animación orgánica: Curvas de aceleración personalizadas (cubic-bezier) para que textos e imágenes no aparezcan de forma brusca.
- Eficiencia de carga: Al no utilizar dependencias externas (librerías o fuentes pesadas), el gadget añade apenas milisegundos al tiempo de carga, manteniendo Core Web Vitals óptimos.
- Escalabilidad automática: El JavaScript detecta nuevos
feature-itemsin configuraciones extra.
❓ Preguntas frecuentes
¿Puedo ponerlo en WordPress o cualquier HTML?
Sí, funciona en cualquier sitio web. Solo copia el bloque completo dentro de un contenedor o página.
¿Se rompe si añado 5 o más features?
No, el script es dinámico: detecta cualquier .feature-item nuevo sin configuración extra.
¿Cómo cambio los colores primarios?
Modifica el #4285f4 en el CSS (línea del ::before, active h3 y hover).
¿Ralentiza mi blog?
No. El gadget pesa menos de 15kb (sin imágenes) y no usa librerías externas.
¿Por qué no se ven las imágenes en móvil al cargar la página?
El script las clona automáticamente. Si no ves nada, verifica que los data-id coincidan exactamente con los números en activateFeature(N).
¿Puedo usar videos en lugar de imágenes?
Claro. Reemplaza la etiqueta <img> por un <iframe> o <video> manteniendo el data-id.
Gadget profesional
Ya tienes en tu blog un sistema profesional de pestañas dinámicas que funciona como tabs en escritorio y como acordeón en móvil. Sin modificar la plantilla, sin librerías externas, y con una experiencia de usuario impecable. Personaliza las imágenes, los textos y comienza a usar este gadget para destacar características de productos, tutoriales, o cualquier contenido que necesite una navegación visual limpia.
0 comments:
Publicar un comentario