Exclusivo Menú Orbital para Blogger
Cómo implementar un Menú Orbital Nativo para Blog bajo la tecnología Blogger
En este artículo aprenderás a integrar un menú moderno, responsive y con diseño orbital nativo en tu blog desarrollado bajo la plataforma Blogger. Este menú se adapta automáticamente a cualquier pantalla, convirtiéndose en un botón flotante tipo hamburguesa en móviles, ubicado en la esquina inferior derecha del dispositivo.
Ideal para mejorar la experiencia de navegación y el diseño visual de tu blog sin plugins externos, usando solo HTML, CSS y JavaScript.
¿Qué es un Menú Orbital Nativo en Blogger?
El menú orbital nativo es un sistema de navegación diseñado para adaptarse a múltiples dispositivos, optimizando la usabilidad desde móviles. A diferencia del menú tradicional de Blogger, este se comporta como una aplicación móvil:
- En escritorios: muestra el menú horizontal en la parte superior.
- En móviles: muestra un botón circular flotante con animación hamburguesa.
- Al hacer clic, el menú se despliega con animaciones suaves.
Todo esto sin usar librerías externas pesadas, haciendo que sea nativo, ligero y rápido.
Pasos para implementar el Menú Orbital en Blogger
1. Accede a tu panel de Blogger
- Ve a www.blogger.com.
- Selecciona tu blog.
- Haz clic en Tema > Personalizar > Editar HTML.
2. Inserta el código dentro de la plantilla
Ubica la etiqueta <body> y justo después, pega el siguiente código completo del menú orbital nativo:
<!-- INICIO MENÚ ORBITAL NATIVO -->
<nav>
<div class="menu">
<a href="#inicio"><i data-lucide="home"></i>Inicio</a>
<a href="#servicios"><i data-lucide="briefcase"></i>Servicios</a>
<a href="#portafolio"><i data-lucide="layout-dashboard"></i>Portafolio</a>
<a href="#contacto"><i data-lucide="mail"></i>Contacto</a>
</div>
</nav>
<button class="hamburger" id="hamburgerBtn" aria-label="Abrir menú">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</button>
<div class="mobile-menu" id="mobileMenu">
<a href="#inicio"><i data-lucide="home"></i>Inicio</a>
<a href="#servicios"><i data-lucide="briefcase"></i>Servicios</a>
<a href="#portafolio"><i data-lucide="layout-dashboard"></i>Portafolio</a>
<a href="#contacto"><i data-lucide="mail"></i>Contacto</a>
</div>
<!-- FIN MENÚ ORBITAL -->
3. Añade los estilos CSS en el <head>
Ubica la etiqueta </head> y justo antes, pega lo siguiente:
<style>
/* (Aquí pega todo el CSS del menú orbital) */
</style>
<link href="https://unpkg.com/lucide@latest" rel="stylesheet">
4. Agrega el JavaScript justo antes de </body>
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<script>
lucide.createIcons();
const hamburgerBtn = document.getElementById('hamburgerBtn');
const mobileMenu = document.getElementById('mobileMenu');
hamburgerBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('show');
hamburgerBtn.classList.toggle('open');
});
document.querySelectorAll('.mobile-menu a').forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.remove('show');
hamburgerBtn.classList.remove('open');
});
});
</script>
Resultado Final: Menú Orbital Responsive en Blogger
Una vez guardes los cambios en tu plantilla, verás el menú horizontal en la parte superior de tu blog desde escritorio. En dispositivos móviles, se transformará en un botón circular flotante con animación, permitiendo al usuario navegar de forma fluida.
Este tipo de menú orbital nativo mejora la estética de tu blog, su usabilidad y la percepción profesional de tu proyecto personal o tienda online en Blogger.
¿Quieres personalizarlo más?
Puedes modificar:
- Los íconos de Lucide (ver: https://lucide.dev/icons)
- Los colores del fondo y los textos
- La posición del botón flotante
- Agregar enlaces a otras páginas como “Tienda”, “Blog”, etc.
¿Necesitas ayuda personalizada para adaptarlo a tu plantilla específica de Blogger? Déjalo en los comentarios o contáctanos.
Conclusión
Implementar un Menú Orbital Nativo en Blogger es una excelente forma de modernizar tu blog sin salir de la plataforma. No requiere conocimientos avanzados de programación y se integra directamente en la plantilla HTML. Además, mejora la experiencia de usuario en móviles, lo cual es vital hoy en día.
Ahora que lo has implementado, ¡disfruta de un blog más dinámico y profesional!
El contenido y material publicado es completamente gratuito. Tu contribución permite que este blog continúe funcionando.
