Cómo hacer un menú horizontal con submenús y buscador integrado para Blogger?
Menú Desplegable Responsive con Buscador Integrado: ¡El Tutorial Definitivo para tu Blogger!
¿Quieres darle un toque profesional y funcional a la navegación de tu blog de Blogger? ¡Estás en el lugar correcto! Hoy te guiaré paso a paso para implementar un **menú de navegación desplegable responsive con buscador integrado**, todo listo para copiar y pegar directamente en un widget de tu blog. ¡Prepárate para sorprender a tus visitantes con una experiencia de usuario excepcional!
¿Por qué un Menú Desplegable Responsive con Buscador Integrado?
En el mundo actual, donde el acceso a internet se realiza desde una infinidad de dispositivos, tener un diseño web responsive es crucial. Un **menú desplegable responsive** se adapta perfectamente a pantallas de todos los tamaños, ofreciendo una navegación intuitiva tanto en ordenadores de escritorio como en smartphones y tablets.
Además, un **buscador integrado** permite a tus usuarios encontrar rápidamente el contenido que les interesa, mejorando la usabilidad y el tiempo de permanencia en tu blog. ¡Es una combinación poderosa para optimizar la experiencia de tus lectores!
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
Listo para Blogger: Integración Directa en un Widget
La mejor parte de este tutorial es que el código que te proporcionaré está diseñado específicamente para integrarse sin complicaciones en un widget HTML/JavaScript de Blogger. No necesitarás editar la plantilla principal, ¡lo que facilita muchísimo la implementación!
---¡Manos a la Obra! Código Completo para tu Menú y Buscador
Aquí tienes el código completo que debes copiar y pegar en tu widget de Blogger. Incluye los estilos CSS necesarios y el HTML para la estructura del menú y el buscador.
<style>
/* Estilos base del cuerpo */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding-top: 70px;
}
/* Reset básico para el menú */
.menu-wrapper,
.menu-wrapper ul,
.menu-wrapper li {
margin: 0;
padding: 0;
list-style: none;
}
/* Contenedor principal del menú - FIJO EN LA PARTE SUPERIOR */
.menu-wrapper {
background: #2c3e50; /* Color de fondo oscuro para el menú principal */
font-family: 'Montserrat', sans-serif;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
width: 100%; /* Asegura que ocupe todo el ancho */
z-index: 1000; /* Asegura que esté por encima de otros elementos */
box-sizing: border-box;
display: flex;
justify-content: center; /* Centra el contenido del menú */
align-items: center;
position: fixed; /* ¡Aquí está la magia para que se fije! */
top: 0;
left: 0;
right: 0;
min-height: 60px; /* Altura mínima del menú */
transition: background 0.3s ease;
}
/* Contenedor interno para limitar el ancho y centrar */
.menu-inner-container {
max-width: 1200px; /* Ancho máximo para el contenido del menú */
width: 100%;
display: flex;
justify-content: space-between; /* Espacia el menú principal y el buscador */
align-items: center;
padding: 0 20px; /* Padding horizontal para el contenido */
box-sizing: border-box;
}
/* Estilos del menú principal */
.main-menu {
display: flex; /* Utiliza flexbox para los ítems de nivel superior */
}
.main-menu > li {
position: relative; /* Para posicionar submenús */
}
.main-menu > li > a {
display: block;
padding: 0 18px;
line-height: 60px; /* Centra el texto verticalmente */
color: #ecf0f1; /* Color de texto claro */
text-decoration: none;
font-weight: 500; /* Menos negrita, más profesional */
transition: background 0.3s ease, color 0.3s ease;
position: relative; /* Para el efecto de subrayado */
}
.main-menu > li > a:hover {
background: #34495e; /* Color al pasar el cursor */
color: #ffffff;
}
/* Efecto de subrayado sutil al pasar el cursor */
.main-menu > li > a::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 3px;
background-color: #007bff;
transition: all 0.3s ease;
transform: translateX(-50%);
}
.main-menu > li > a:hover::after {
width: calc(100% - 36px); /* Ancho del subrayado */
}
/* Estilos del submenú */
.main-menu ul {
display: none; /* Oculto por defecto */
position: absolute;
top: 100%; /* Se posiciona justo debajo del padre */
left: 0;
background: #34495e; /* Color de fondo del submenú, ligeramente diferente */
min-width: 200px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
border-radius: 0 0 8px 8px; /* Bordes redondeados abajo */
z-index: 1010; /* Asegura que esté por encima del menú principal */
flex-direction: column; /* Para apilar los ítems del submenú */
overflow: hidden; /* Para el efecto de borde redondeado */
}
.main-menu li:hover > ul {
display: flex; /* Muestra el submenú al pasar el cursor */
}
.main-menu ul li a {
display: block;
padding: 12px 18px;
color: #dbe4eb; /* Color de texto más claro para submenú */
text-decoration: none;
font-size: 0.9em;
transition: background 0.3s ease, color 0.3s ease;
border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* Separador sutil */
}
.main-menu ul li:last-child a {
border-bottom: none; /* Elimina el borde del último ítem */
}
.main-menu ul li a:hover {
background: #007bff; /* Color al pasar el cursor en submenú */
color: #ffffff;
}
/* Estilos del buscador */
.search-container {
display: flex;
align-items: center;
position: relative;
margin-left: 20px; /* Espacio entre el menú y el buscador */
}
.search-input {
border: 1px solid #5d748f; /* Borde más suave */
background-color: #4a6078; /* Fondo más suave */
color: #ecf0f1;
padding: 8px 35px 8px 15px; /* Espacio para el icono */
border-radius: 25px; /* Más redondeado */
outline: none;
width: 180px; /* Ancho por defecto del buscador */
transition: width 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
font-size: 0.9em;
}
.search-input::placeholder {
color: #aebfd0;
}
.search-input:focus {
width: 220px; /* Expande al enfocar */
border-color: #007bff;
background-color: #3b506b; /* Ligeramente más oscuro al enfocar */
}
.search-icon {
position: absolute;
right: 15px; /* Ajusta la posición del icono */
color: #aebfd0;
cursor: pointer;
font-size: 1.1em;
}
/* Icono de hamburguesa para móviles */
.hamburger-icon {
display: none; /* Oculto por defecto en escritorio */
flex-direction: column;
cursor: pointer;
padding: 10px;
margin-left: 20px;
transition: transform 0.4s ease;
}
.hamburger-icon div {
width: 28px; /* Un poco más grande */
height: 3px;
background-color: #ecf0f1;
margin: 5px 0; /* Más espacio entre barras */
transition: 0.4s;
border-radius: 2px;
}
/* Responsive para dispositivos móviles */
@media (max-width: 768px) {
.menu-inner-container {
flex-wrap: wrap; /* Permite que los ítems se envuelvan */
justify-content: center; /* Centra los elementos */
padding: 0 15px;
}
.main-menu {
flex-direction: column; /* Apila los ítems del menú principal */
width: 100%;
display: none; /* Oculta el menú por defecto en móvil */
background-color: #34495e; /* Fondo para el menú expandido en móvil */
padding-bottom: 10px;
}
.main-menu.active {
display: flex; /* Muestra el menú cuando está activo */
}
.main-menu > li {
width: 100%; /* Cada ítem ocupa todo el ancho */
text-align: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.main-menu > li:last-child {
border-bottom: none;
}
.main-menu > li > a {
line-height: 50px; /* Ajusta la altura de línea en móvil */
padding: 0 10px;
}
.main-menu > li > a::after { /* Desactiva el efecto de subrayado en móvil */
display: none;
}
.main-menu ul {
position: static; /* Cambia a estático para fluir con el contenido */
width: 100%;
min-width: unset;
box-shadow: none;
border-radius: 0;
background: #4a6078; /* Un tono ligeramente diferente para el submenú en móvil */
padding-left: 15px; /* Indentación para sub-ítems */
}
.main-menu li:hover > ul {
display: flex; /* Mantiene el display flex para submenú */
}
.main-menu ul li a {
padding: 10px 25px; /* Mayor padding para los sub-ítems en móvil */
text-align: left;
font-size: 0.85em;
}
.search-container {
width: calc(100% - 30px); /* Ocupa casi todo el ancho */
margin: 10px 0 0 0; /* Margen para separarlo */
order: -1; /* Mueve el buscador arriba del menú en móvil */
justify-content: center;
}
.search-input {
width: 100%; /* Ocupa todo el ancho disponible */
text-align: center; /* Centra el placeholder */
}
.search-input:focus {
width: 100%; /* No se expande, ya ocupa todo el ancho */
}
.hamburger-icon {
display: flex; /* Muestra el icono de hamburguesa */
position: absolute; /* Posiciona el icono absolutamente */
right: 20px;
top: 10px;
z-index: 1001; /* Asegura que esté por encima de todo */
}
/* Animación del icono de hamburguesa */
.hamburger-icon.open .bar1 {
transform: rotate(-45deg) translate(-6px, 6px);
}
.hamburger-icon.open .bar2 {
opacity: 0;
}
.hamburger-icon.open .bar3 {
transform: rotate(45deg) translate(-6px, -6px);
}
}
/* Para navegadores que no soportan :focus-within */
.main-menu > li:focus-within > ul {
display: flex;
}
</style>
<div class="menu-wrapper">
<div class="menu-inner-container">
<nav class="main-menu">
<!-- Eliminé el <ul> adicional que estaba aquí -->
<li><a href="URL del enlace">Inicio</a></li>
<li><a href="#">Ciberseguridad</a>
<ul>
<li><a href="URL del enlace">Mi blog de ciberseguridad</a></li>
<li><a href="URL del enlace">Noticias de ciberseguridad</a></li>
<li><a href="URL del enlace">Herramientas de ciberseguridad</a></li>
<li><a href="URL del enlace">Cursos de ciberseguridad online</a></li>
</ul>
</li>
<li><a href="#">Informacion relevante</a>
<ul>
<li><a href="URL del enlace">Artículos informativos</a></li>
<li><a href="URL del enlace">Guías y tutoriales</a></li>
<li><a href="URL del enlace">Novedades y tendencias</a></li>
<li><a href="URL del enlace">Recursos útiles para aprender</a></li>
</ul>
</li>
<li><a href="#">Explora mi blog</a>
<ul>
<li><a href="URL del enlace">Sección de Android</a></li>
<li><a href="URL del enlace">Consejos de productividad</a></li>
<li><a href="URL del enlace">Inteligencia Artificial y Deepseek</a></li>
<li><a href="URL del enlace">Herramientas de chat innovadoras</a></li>
</ul>
</li>
</nav>
<div class="search-container">
<form action='/search' method='get'>
<input type='text' name='q' class='search-input' placeholder='Buscar en el blog...' onblur='if (this.value == "") this.value = "Buscar en el blog...";' onfocus='if (this.value == "Buscar en el blog...") this.value = "";'/>
<span class="search-icon">🔍</span> </form>
</div>
<div class="hamburger-icon" onclick="toggleMenu()">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
</div>
<script>
function toggleMenu() {
const menu = document.querySelector('.main-menu');
const icon = document.querySelector('.hamburger-icon');
menu.classList.toggle('active');
icon.classList.toggle('open');
}
</script>
¿Cómo Integrarlo en tu Widget de Blogger?
Sigue estos sencillos pasos para añadir el menú a tu blog:
- Inicia sesión en tu cuenta de Blogger.
- Ve a la sección de **"Diseño"** de tu blog.
- Haz clic en **"Añadir un gadget"**.
- Selecciona el gadget **"HTML/JavaScript"**.
- Copia y pega TODO el código que te proporcioné en el área de contenido del widget.
- Opcionalmente, puedes darle un **título** al widget (por ejemplo, "Menú de Navegación").
- Haz clic en **"Guardar"**.
- Finalmente, haz clic en **"Guardar disposición"** para aplicar los cambios a tu blog.
¡Y listo! Ahora deberías ver tu nuevo menú desplegable responsive con buscador integrado en tu blog.
---Personalización y Adaptación
Este código base es totalmente personalizable para que se adapte perfectamente al estilo de tu blog. Aquí tienes algunas ideas para adaptarlo a tu gusto:
- **Cambiar los enlaces:** Reemplaza
"URL del enlace"con las direcciones reales de las páginas y categorías de tu blog. Utiliza **enlaces relevantes para el nicho de tu blog**, como "tutoriales para principiantes en ciberseguridad" o "las últimas novedades en inteligencia artificial". - **Modificar los colores:** Edita los valores hexadecimales en la sección
<style>para cambiar los colores de fondo, texto y los efectos hover. Puedes buscar paletas de colores online para inspirarte y encontrar la combinación perfecta para tu marca. - **Ajustar la tipografía:** Cambia la propiedad
font-familyen los estilos para utilizar las fuentes que mejor se adapten al diseño de tu blog. Hemos incluido fuentes de Google Fonts (Roboto y Montserrat) para un aspecto moderno, pero puedes explorar otras opciones. - **Añadir o eliminar elementos del menú:** Simplemente edita las etiquetas
<li>dentro de la sección<nav class="main-menu">para agregar o quitar elementos del menú principal y los submenús. Piensa en **categorías de contenido populares** en tu blog para incluirlas en el menú y facilitar la navegación. - **Personalizar el texto del buscador:** Modifica el texto del
placeholderen la etiqueta<input>para que sea más específico para tu blog, como "Buscar artículos sobre tecnología" o "Encuentra tu próximo tutorial".
Un Menú Profesional para un Blog Exitoso
Implementar un **menú desplegable responsive con buscador integrado** en tu blog de Blogger es una excelente manera de mejorar la navegación, la experiencia del usuario y, en última instancia, el éxito de tu contenido. Con este tutorial detallado y el código listo para usar, ¡ya no tienes excusas para no tener un menú moderno y funcional!
¡Espero que este tutorial te sea de gran utilidad! Si tienes alguna pregunta o encuentras algún desafío, no dudes en dejar un comentario. ¡Estoy aquí para ayudarte a crear un blog increíble!
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
34 comentarios: