Cómo insertar un Menú en mi blog de Blogger
Cómo Insertar un Menú Moderno en tu Blog de Blogger: Guía Paso a Paso
Introducción: Por qué un menú profesional es clave para tu blog
Un menú de navegación atractivo y funcional es el corazón de la experiencia de usuario en tu blog de Blogger. No solo ayuda a tus lectores a encontrar contenido fácilmente, sino que también mejora el SEO y la estética de tu sitio. En esta guía completa, te enseñaremos cómo insertar un menú responsive con submenús, transiciones suaves y un diseño moderno, todo implementado en un solo widget de Blogger. ¡Sin complicaciones y con resultados profesionales!
¿Qué incluye este menú para tu blog?
Antes de sumergirnos en el proceso, conoce las características principales de este menú:
- Diseño completamente responsive: Se adapta a cualquier dispositivo, con un menú horizontal en desktop y un menú hamburguesa en móviles (<768px).
- Submenús funcionales: En desktop, se muestran al pasar el cursor (hover); en móviles, se expanden al tocar.
- Transiciones suaves: Animaciones CSS para una experiencia fluida y profesional.
- Código limpio y organizado: Usa variables CSS para personalización fácil y JavaScript mínimo.
- Compatibilidad garantizada: Funciona en todos los navegadores modernos y ofrece soporte táctil perfecto en móviles.
- Personalización sencilla: Cambia colores, añade más ítems o ajusta el breakpoint con facilidad.
Este menú es ideal tanto para principiantes como para usuarios avanzados que buscan cómo crear un menú en Blogger sin complicaciones.
Puede utilizar una herramienta llamada Editor HTML ONLINE, donde podrá realizar los cambios en vivo y luego copiar el código he insertarlo en un solo widget de Blogger, o una pagina web.
A continuación puede ver su demostración en el siguiente blog de demos
Paso a paso: Cómo añadir el menú en tu blog de Blogger
Sigue estos pasos para implementar el menú en tu blog. Todo el código se insertará en un solo widget HTML/JavaScript, lo que hace que el proceso sea súper sencillo.
Paso 1: Accede al panel de Blogger
- Inicia sesión en tu cuenta de Blogger.
- Ve al Panel de control y selecciona el blog donde deseas añadir el menú.
- Dirígete a la pestaña Diseño (o "Layout" en inglés).
Paso 2: Añade un widget HTML/JavaScript
- En la sección de diseño, busca el área donde deseas colocar el menú (por ejemplo, en la parte superior, debajo del encabezado).
- Haz clic en Añadir un gadget y selecciona HTML/JavaScript de la lista.
- Deja el título del gadget en blanco para un aspecto más limpio.
Paso 3: Inserta el código del menú
Copia y pega el siguiente código en el campo de contenido del widget. Este incluye HTML, CSS y JavaScript para un menú completo y funcional:
<style>
/* Variables CSS */
:root {
--primary-color: #2563eb;
--primary-hover: #1d4ed8;
--text-color: #1f2937;
--text-light: #6b7280;
--bg-color: #ffffff;
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--transition: all 0.3s ease;
}
/* Reset y estilos base */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: var(--text-color);
background-color: #f9fafb;
padding-top: 70px; /* Para compensar el menú fijo */
}
/* Contenedor del menú - Ahora es fixed */
.navbar {
background-color: var(--bg-color);
box-shadow: var(--shadow);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
width: 100%;
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
}
/* Logo */
.logo {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color);
text-decoration: none;
}
/* Menú principal */
.nav-links {
display: flex;
gap: 20px;
list-style: none;
}
.nav-links li {
position: relative;
}
.nav-links a {
text-decoration: none;
color: var(--text-color);
font-weight: 500;
padding: 10px 15px;
border-radius: 6px;
transition: var(--transition);
display: flex;
align-items: center;
gap: 5px;
}
.nav-links a:hover {
background-color: rgba(37, 99, 235, 0.1);
color: var(--primary-color);
}
/* Submenú */
.dropdown {
position: absolute;
top: 100%;
left: 0;
background-color: var(--bg-color);
border-radius: 8px;
box-shadow: var(--shadow);
min-width: 200px;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: var(--transition);
z-index: 100;
}
.dropdown li {
width: 100%;
}
.dropdown a {
padding: 12px 20px;
width: 100%;
}
.nav-links li:hover .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
list-style: none;
}
/* Botón hamburguesa - Mejorado para móvil */
.hamburger {
display: none;
cursor: pointer;
width: 30px;
height: 30px;
position: relative;
z-index: 1001;
background: none;
border: none;
}
.hamburger span {
display: block;
width: 100%;
height: 3px;
background-color: var(--text-color);
position: absolute;
left: 0;
transition: var(--transition);
}
.hamburger span:nth-child(1) {
top: 0;
}
.hamburger span:nth-child(2) {
top: 50%;
transform: translateY(-50%);
}
.hamburger span:nth-child(3) {
bottom: 0;
}
.hamburger.active span:nth-child(1) {
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
bottom: 50%;
transform: translateY(50%) rotate(-45deg);
}
/* Versión móvil - Mejorada */
@media (max-width: 768px) {
.hamburger {
display: block;
position: fixed; /* Ahora es fixed para seguir al menú */
right: 20px;
top: 20px;
}
.nav-links {
position: fixed;
top: 70px;
left: 0;
width: 100%;
background-color: var(--bg-color);
flex-direction: column;
padding: 20px 0;
box-shadow: var(--shadow);
transform: translateY(-100%);
transition: transform 0.3s ease;
z-index: 999;
height: calc(100vh - 70px);
overflow-y: auto;
}
.nav-links.active {
transform: translateY(0);
}
.nav-links li {
width: 100%;
}
.nav-links a {
padding: 15px 20px;
}
.dropdown {
position: static;
box-shadow: none;
max-height: 0;
overflow: hidden;
opacity: 1;
visibility: visible;
transform: none;
transition: max-height 0.3s ease;
background-color: rgba(37, 99, 235, 0.05);
border-radius: 0;
margin: 0;
}
.dropdown.active {
max-height: 500px;
}
.dropdown a {
padding-left: 40px;
}
.nav-links li:hover .dropdown {
transform: none;
}
}
</style>
<nav class="navbar">
<div class="nav-container">
<a href="#" class="logo">MiSitio</a>
<button class="hamburger" aria-label="Menú">
<span></span>
<span></span>
<span></span>
</button>
<ul class="nav-links">
<li><a href="#">Inicio</a></li>
<li>
<a href="#">Categorías <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg></a>
<ul class="dropdown">
<li><a href="#">Tecnología</a></li>
<li><a href="#">Lifestyle</a></li>
<li><a href="#">Viajes</a></li>
</ul>
</li>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
</nav>
<script>
document.addEventListener('DOMContentLoaded', function() {
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
const dropdownToggles = document.querySelectorAll('.nav-links > li > a');
// Alternar menú principal
hamburger.addEventListener('click', function(e) {
e.stopPropagation();
this.classList.toggle('active');
navLinks.classList.toggle('active');
// Bloquear/desbloquear scroll del body cuando el menú está abierto
if (navLinks.classList.contains('active')) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = '';
}
});
// Alternar submenús en móvil
dropdownToggles.forEach(toggle => {
if (toggle.nextElementSibling && toggle.nextElementSibling.classList.contains('dropdown')) {
toggle.addEventListener('click', function(e) {
if (window.innerWidth <= 768) {
e.preventDefault();
e.stopPropagation();
const dropdown = this.nextElementSibling;
const isActive = dropdown.classList.contains('active');
// Cerrar otros dropdowns
document.querySelectorAll('.dropdown.active').forEach(item => {
if (item !== dropdown) item.classList.remove('active');
});
dropdown.classList.toggle('active', !isActive);
}
});
}
});
// Cerrar menú al hacer clic fuera
document.addEventListener('click', function(e) {
if (window.innerWidth <= 768 && navLinks.classList.contains('active')) {
if (!e.target.closest('.nav-links') && !e.target.closest('.hamburger')) {
hamburger.classList.remove('active');
navLinks.classList.remove('active');
document.querySelectorAll('.dropdown.active').forEach(item => {
item.classList.remove('active');
});
document.body.style.overflow = '';
}
}
});
// Cerrar menú al redimensionar a desktop
window.addEventListener('resize', function() {
if (window.innerWidth > 768) {
hamburger.classList.remove('active');
navLinks.classList.remove('active');
document.querySelectorAll('.dropdown.active').forEach(item => {
item.classList.remove('active');
});
document.body.style.overflow = '';
}
});
});
</script>
Paso 4: Guarda y verifica
- Haz clic en Guardar en el widget y luego en Guardar disposición en la pestaña de diseño.
- Abre tu blog en una ventana de incógnito o limpia la caché para ver el menú en acción.
- Prueba el menú en diferentes dispositivos para asegurarte de que sea responsive y funcione correctamente.
Cómo personalizar tu menú
Este menú está diseñado para ser fácil de personalizar. Aquí tienes algunas ideas:
Cambiar colores
Modifica las variables en el bloque :root
del CSS. Por ejemplo:
:root {
--primary-color: #e11d48; /* Cambia el color principal */
--bg-color: #f3f4f6; /* Cambia el fondo del menú */
}
Añadir más ítems al menú
Para agregar más elementos, incluye nuevos <li>
en la lista <ul class="nav-links">
. Por ejemplo:
<li><a href="#">Novedades</a></li>
Añadir más submenús
Para crear otro submenú, replica la estructura del elemento con clase dropdown
:
<li>
<a href="#">Más <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg></a>
<ul class="dropdown">
<li><a href="#">Opción 1</a></li>
<li><a href="#">Opción 2</a></li>
</ul>
</li>
Cambiar el breakpoint
Si deseas que el menú hamburguesa aparezca en un tamaño diferente (por ejemplo, 992px en lugar de 768px), ajusta el @media
en el CSS:
@media (max-width: 992px) {
.hamburger {
display: block;
}
/* Resto del código */
}
Consejos para optimizar el SEO de tu menú
Un menú bien estructurado no solo mejora la navegación, sino que también impulsa el SEO. Aquí van algunos consejos:
- Usa palabras clave en los enlaces: Por ejemplo, en lugar de “Categorías”, usa “Consejos de tecnología” si tu blog es sobre ese tema.
- Enlaces relevantes: Asegúrate de que los ítems del menú apunten a páginas importantes de tu blog, como categorías o publicaciones destacadas.
- Estructura semántica: El código proporcionado ya usa HTML semántico (
<nav>
,<ul>
, etc.), lo que ayuda a los motores de búsqueda a entender tu menú. - Tiempo de carga: El JavaScript es mínimo, y las animaciones CSS son ligeras, lo que garantiza un tiempo de carga rápido.
Solución de problemas comunes
El menú no aparece
- Verifica el widget: Asegúrate de que el gadget HTML/JavaScript esté en la posición correcta.
- Errores de código: Revisa que no hayas eliminado accidentalmente partes del código al copiarlo.
El diseño no es responsive
- Prueba en diferentes navegadores: El menú está probado para funcionar en Chrome, Firefox, Safari y Edge.
- Limpia la caché: Los cambios en Blogger pueden tardar en reflejarse si no limpias la caché del navegador.
Los submenús no funcionan en móviles
- JavaScript bloqueado: Asegúrate de que tu plantilla de Blogger no bloquea scripts externos.
- Toca dos veces: En algunos dispositivos, puede ser necesario tocar dos veces para activar los submenús. Esto es normal en interfaces táctiles.
Conclusión: Lleva tu blog al siguiente nivel
Añadir un menú profesional y responsive a tu blog de Blogger es más fácil de lo que parece. Con este código y nuestra guía, puedes implementar un menú moderno que no solo mejora la experiencia de usuario, sino que también impulsa el tráfico orgánico gracias a su optimización SEO. Personalízalo según tu estilo y empieza a disfrutar de un blog más atractivo y funcional.
¿Listo para probarlo? ¡Copia el código, sigue los pasos y comparte tu experiencia en los comentarios! Si necesitas ayuda con la personalización o tienes dudas, déjanos un mensaje y te guiaremos.
¡Comparte tu experiencia!
Hola Luis.. ¿Qué tal?
ResponderEliminarNo se me carga la página del DEMO. ¿Hay algún error?
A este se le pueden agregar sub-Menú!??
ResponderEliminarHola amigo! Emmm... Quería saber si se puede cambiar el color... Es decir, el blanco esta bien, pero quería saber si se le podía cambiar el rojo tirando a marron o como se diga xDD
ResponderEliminarGracias n.n
Que tal Luis! Excelente el post, y muy útil el widget del menú. Ahora bien, yo lo instalé pero no necesitaba tantos botones, así que elimine algunos, el problema es que la barra del menú no queda centrada en relación a la cabecera, porque ya no tiene el mismo largo que al principio, y además quedan unas lineas tipo recuadro vacío hacia el lado derecho donde estaban antes los otros botones eliminados. Como puedo hacer para centrar el menú y reducir las lineas externas para que no se vea como si faltaran botones? Gracias por la ayuda!
ResponderEliminarse puede hacer mas ancho?
ResponderEliminar