Menú responsive con iconos sociales para Blogger

17.4.16



Post actualizado: 4-Enero-2018

Este tutorial supone una actualización, o mejor dicho añadido, al anterior Crea un menú desplegable responsive para Blogger. Siguiendo unos sencillos pasos instalaremos un menú responsive con nuestros iconos sociales en él. De esta manera los tendremos siempre fijos en la zona superior derecha de nuestro navegador.

Los iconos que enlazaran a nuestras redes sociales son iconos web, así que no debes preocuparte por diseñar y subir imágenes a la red. Utilizaremos la fuente Awesome que es en si es una fuente tipográfica cuyos caracteres en vez de letras son iconos. Esto permite prescindir de imágenes que suelen pesar más y a las que hay que enlazar, cada una de ellas, a una URL concreta. El proceso es muy sencillo y el resultado es limpio y profesional.

Para ver el aspecto y funcionamiento de este menú clica en el enlace inferior. Recuerda que si estas en el ordenador puedes ver como responderá en pantallas más pequeñas estrechando la ventana de tu navegador. Si quieres verlo en la versión móvil de Blogger añade al final de la URL esto:  ?m=1.


El código del menú es básicamente el del anterior tutorial. Lo único que he hecho es crear algunas líneas más para alojar estos iconos sociales y que se muestren siempre a la derecha de la barra en cualquier dispositivo y tamaño de pantalla. Al igual que aquel no necesita añadir ningun script jQuery ni externo ni interno para que funcione, aunque si necesitaremos instalar la fuente Awesome.

Si ya instalaste el anterior menú y deseas añadir este nuevo te recomiendo que lo sobreescribas con el que ahora daré. He intentado conservar al máxima su estructura pero los cambios son significativos y es posible liarse al actualizarlo.

Para instalar este menú solo tienes que seguir unos simples pasos que te detallo a continuación. Pero si te lías , no siempre me explico de manera muy llana, o prefieres los videotutoriales, Mónica Lemos de Blogger paso a paso te va a acompañar en el proceso.

Yo no soy muy forofa de los videotutoriales debido a mi impaciencia, pero debo reconocer que para algunos temas son de gran utilidad, como es el caso. ASí pues agradezcamos a Mónica habernos preparado un videotutorial conciso y claro que nos guiará por todo el proceso de instalación del menú.


Videotutorial de Mónica Lemos


Instalación paso a paso

Como primer paso haz una copia de seguridad de tu plantilla y habilita la vista móvil personaliza de tu blog. Puedes ver como hacerlo en el punto 1 y 2 del tutorial anterior. Vamos a tocar la plantilla HTML y toda precaución es poca. Ten a mano las URL de tus enlaces sociales y sigue estos pasos:

1. Instala la fuente de  iconos web Font Awesome

En el panel de administración de Blogger selecciona la opción plantilla y clica  en el botón Editar HTML. Clica dentro de las líneas de código y saca el buscador clicando a la vez CTRL+F. Escribe </head>. Copia el siguiente código y pégalo justo antes de la etiqueta </head>.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>

2. Crea el HTML de tu menú

Continuamos en edición HTML de la plantilla. Busca el código <body>. Si tienes instalada la plantilla simple de Blogger te llevará a una línea similar a  <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>. Justo debajo pega el código que adjunto:
<nav id='menu'>
    <div class='barra'>
        <input type='checkbox'/>
            <label><i aria-hidden='true' class='fa fa-bars'/></label>
            <ul class='principal'>
            <li><a href='/'>Inicio</a></li>
            <li><a href='#'>Sobre mi</a></li>
            <li><a href='#'>Categorías <i class="fa fa-chevron-down"></i></a>
                <ul class='menus'>
                <li><a href='#'>Categoría 1</a></li>
                <li><a href='#'>Categoría 2</a></li>
                <li><a href='#'>Categoría 3</a></li>
                </ul>
               </li>
            <li><a href='#'>Contacto</a></li>
            </ul>
        <div class='iconos'>
            <a href='#'><i aria-hidden='true' class='fa fa-twitter'/></a>
            <a href='#'><i aria-hidden='true' class='fa fa-facebook'/></a>
            <a href='#'><i aria-hidden='true' class='fa fa-instagram'/></a>
            <a href='#'><i aria-hidden='true' class='fa fa-pinterest-p'/></a>
          </div>
    </div>
</nav> 


Para añadir las categorías de tu menú y los enlaces a tus redes sociales necesitas unos simples conocimientos de HTML. Los nombres que ves en gris debes cambiarlos por los de tus categorías de menú. Si deseas añadir más categorías o subcategorías  te recomiendo que consultes el apartado de listas de mi post sobre marcado de texto en HTML.

Para que los enlaces funcionen debes substituir el signo de parrilla # por la URL donde quieres que enlazen.

He añadido los iconos de las redes sociales que puedes ver en la demo. Para eliminar o añadir más veamos como funciona. Fíjate que cada red social se representa en una línea. Por ejemplo:
<a href='#'><i aria-hidden='true' class='fa fa-twitter'/></a>
Entre <a href='#'>  y </a>  debes introducir el código que identifica al icono de esa red social. La fuente Awesome dispone de muchos iconos. Si necesitas añadir otros puedes acceder al listado completo y sus correspondientes códigos en la página oficial de la fuente Awesome.

Recuerda sustiuir también en estas líneas de código el signo # por la URL de tus redes sociales o no funcionarán.


3. Añade el código CSS

Busca en la plantilla este código ]]></b:skin> . Copia las siguientes líneas y pégalas justo antes de ese código.
/*-----------------------------------------------
Menu responsive de MBT modificado por Minerva Aurora
Tutorial disponible en http://minervaurora.blogspot.com/2017/10/menu-responsive-desplegable-iconos-sociales-buscador.html
Libre para uso personal manteniendo la atribución intacta
----------------------------------------------- */
body {
margin: 0px;
padding-right: 0px;
padding-left: 0px;
}
.barra{
width:950px;/*ancho del blog*/
margin:0 auto;
}
#menu{
background: #F1F1F1;/* color de la barra*/
color: #333;/*color de las tres barritas*/
height: 50px;
border-bottom: 1px solid rgba(0,0,0,.05);/* borde inferior de la barra*/
width:100%;
position:fixed; 
z-index:101; 
}
#menu ul,#menu li{
margin: 0px auto;
padding:0 0;
list-style:none;
}
#menu .iconos{
float:right;
}
#menu li{
float:left;
display:inline;
position:relative;
font: 11px Arial, sans-serif;/*tamaño y fuente del texto */
}
#menu ul a{
display: block;
line-height: 50px;
padding: 0 14px;
color: #333;/*color del texto*/
text-transform: uppercase;/*letras mayúsculas*/
letter-spacing: 1.5px;/*espacio entre letras*/
}
#menu li a:hover{
color: #999;/*color del texto al pasar el ratón*/
text-decoration: none;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#menu input{
display:none;
margin:0 0;
padding:0 0;
width:50px;
height:50px;
opacity:0;
cursor:pointer
}
#menu label{
display:none;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 17px;
vertical-align: middle;
}

#menu ul.menus{
height: auto;
overflow: hidden;
width: 170px;
background: #F1F1F1;/*color del fondo del submenu*/
position: absolute;
z-index: 99;
display: none;
border: 1px solid rgba(0,0,0,.05);
}
#menu ul.menus li{
display: block;
width: 100%;
font: 11px  Arial, sans-serif;/*tamaño y fuente del  texto del submenu*/
text-transform: uppercase;
border-bottom: 1px solid #E9E9E9;
}
#menu ul.menus li:last-child{
border-bottom:none;
}
#menu ul.menus a{
color: #333;/*color del  texto del submenu*/
line-height: 35px;
}
#menu li:hover ul.menus{
display:block;
}
#menu ul.menus a:hover{
color: #999;/*color del  texto del submenu al pasar el ratón*/
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
.iconos a{
padding: 0 10px;
height: 50px;
display: inline-block;
}
#menu .iconos .fa{
font-size:14px;
line-height: 50px;
color: #333;/*color del icono social*/
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#menu ul .fa{
font-size: 8px;
position: relative;
top: -1px;
}
#menu .iconos .fa:hover{
color: #999;/*color del icono social al pasar el ratón*/
}

@media screen and (max-width: 768px){ 
#menu{
position:fixed; 
z-index:101; 
}
#menu ul{
background:#F1F1F1;/*color del desplegable del menu movil*/
position:absolute;
top:100%;
right:0;
left:0;
z-index:3;
height:auto;
display:none
}
#menu ul.menus{
width:100%;
position:static;
padding-left:20px
}
#menu li{
display:block;
float:none;
width:auto;
font: 11px  Arial, sans-serif;
 }
#menu ul a{
 display: block;
 line-height: 40px;
 padding: 0 14px;/*tamaño y fuente del  menu movil*/
}
#menu input,#menu label{
position:absolute;
top:0;
left:0;
display:block;
}
#menu input{
z-index:4
}
#menu input:checked + label{
color:#333;/*color de las tres barritas una vez se clica*/
}
#menu input:checked ~ ul{
display:block;
top:50px;
}
.barra{
width:95%!important;
}
}
header{
padding-top:50px;
}
/*fin menu responsive*/
He diseñado un menú neutro y sencillo pero si deseas personalizarlo, y tienes ciertas nociones de CSS, cambia aquellas reglas en las que he añadido comentarios encerrados así  /*comentario*/ .

Los cambios menos comprometidos y más resultones suelen ser los de color. Te anoto los colores utilizados en valores hexadecimales para que puedas sustituirlos por los que desees:

#333 color gris oscuro del texto
#999 color gris del texto al pasar el ratón
#F1F1F1 color gris claro de la barra


Para centrar el menú y que se ajuste al ancho de tu blog en la vista de ordenador deberás modificar el ancho de la segunda regla:
.barra{
width:950px;/*ancho del blog*/
margin:0 auto;
}
Sustituye el valor 950 por el ancho de tu blog.

Guarda los cambios hechos en tu plantilla y comprueba si funciona tu nuevo menú responsive.

He añadido una última regla para empujar la cabecera hacia abajo y que no quede tapada por el menú. Está programada sólo para la plantilla simple de Blogger. Dar soluciones para otras plantillas sin conocerlas sería arriesgado. Si vieses que no funciona puedes eliminarla:
header{
padding-top:50px;
}
Y esto es todo. ¿Qué te ha parecido? Dudas, sugerencias, comentarios... Espero volver prontito para publicar el tutorial que os prometí en la página de facebook de Odisea gráfica. Un tutorial pero que muy muy útil, ¡lo prometo!

Entradas relacionadas

97 comentarios

  1. Hola Minerva
    Como sabes puse el menú responsive en mi blog, para añadir los iconos de RR.SS. sólo debo añadir en html la parte de los iconos verdad? Es que la anterior la tengo y el CSS lo tendría que cambiar?
    Gracias.

    ResponderEliminar
    Respuestas
    1. Hola! Es mucho más práctico que borres todo el CSS y vuelvas a copiar éste. En cuanto al HTML a gustos, yo copiaría el antiguo en un bloc de nota. Copiaría el de este post en su lugar y después volvería a pegar todo lo que entre ul..../ul principal. He añadido como tres clases más..si no aparecen el HTML no funcionará bien!!
      Gracias por confiar en mi trabajo!!

      Eliminar
  2. Muy interesante, gracias por el tutorial. Bss

    ResponderEliminar
  3. todo esta calidad y muy bonito pero qisiera podes agregarle tambeien el buscador a al menu, nose si pudieras ayudarme

    ResponderEliminar
  4. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  5. Me gusto mucho,soy nuevo en esto de blogger y este tutorial me va genial!!, muchas gracias.
    Solo una duda, como puedo cambiar los colores de los iconoes de las redes sociales, las queria invertir a blancas por ejemplo, ya que mi barra la quiero un tanto oscura.
    Gracias de nuevo !!!!

    ResponderEliminar
    Respuestas
    1. Uy creo que llego tarde, parece que ya lo tienes solucionado! Enhorabuena!

      Eliminar
    2. Jeje si ...de igual manera agradezco la respuesta, saludos y sigue asi :D

      Eliminar
  6. Hola Minerva,
    Cambiando de color los iconos de redes sociales, he visto que al pasar el ratón no se cambia el color de los iconos. Justo lo que está en negrita no me funciona:

    .iconos a:hover{
    background: #E9E9E9;/*color del fondo de la categoria al pasar el ratón*/
    color: #000;/*color del icono al pasar el ratón*/
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
    }

    De ese bloque es justo lo que no se cambia, no sé por qué...

    ResponderEliminar
    Respuestas
    1. Hola! Si solo quieres cambiar el color del icono añadir la siguiente regla:
      #menu .fa:hover{
      color:#f00;
      }
      Si no sale no dudes en comentarmelo

      Eliminar
    2. Pues muchas gracias. Ha sido incluir eso y genial, hasta el color que yo tenía marcado para que saliera. =)

      Eliminar
  7. Hola Minerva! Tengo una duda, ¿cómo puedo añadir al menú el buscador?
    Un saludo.

    ResponderEliminar
    Respuestas
    1. No me lo he planteado, porque continuar por aquí ya implica un menú más sofisticado y mi intención primera fue dar una solución responsive simple. Lamento mucho no poder ayudar.

      Eliminar
  8. ¿Cómo hacer el menú transparente?, es decir sin la barra gris de fondo. Gracias.

    ResponderEliminar
  9. Hola Eduardo. Es algo muy sencillo debes cambiar el color gris por el atributo transparent así: #menu { background: transparent;. De todas maneras no te lo recomiendo, en todo caso cámbialo a blanco, de lo contrario cuando navegues hacia abajo se superpondrá a las líneas y fotos del blog.

    ResponderEliminar
    Respuestas
    1. MIL GRACIAS POR RESPONDER. Es cierto, lo dejaré blanco. Cariños desde Argentina. www.eduardofouces.com (justo es blanco) ;)

      Eliminar
  10. Hola Minerva...gracias por esta aporte, me ha sido de gran utilidad como a los otros compañeros que han comentado.

    Tengo dos consultas:

    1. Como minimizar la velocidad de despliegue
    2. El menú móvil hay manera que no tape la cabecera cuando se despliega. La regla que sugieres "header{
    padding-top:45px;}" no me funciona y sigue el menu tapando la cabecera.

    gracias una vez mas.

    ResponderEliminar
    Respuestas
    1. Hola! Lo de la velocidad es posible aplicando CSS. Es posible que dependiendo de tu plantilla esa última regla no funcione. Mándame el link a tu blog en todo caso.
      Un saludo

      Eliminar
  11. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  12. se podria poner como si fuese un gadget? es que ya tengo un menu para la version pc y no me interesa quitarlo

    ResponderEliminar
    Respuestas
    1. Hola Sergio,no acabo de entender muy bien lo que me preguntas. Supongo que se refiere a insertar el código debajo de la cabecera mediante un gadget. En principio no funcionaría porque el CSS está preparado para quedar fijo en la zona superior de la pantalla, pero supongo que podría adaptarse.
      Un saludo

      Eliminar
  13. Muchísimas gracias or el tutorial, lo he instalado y funciona de maravilla pero solo en el ordenador, cuando miro el movil en la versión móvil no sale ningún menú, lo he copiado tal cual lo pones tu y no sale. Me puedes ayudar?
    Mucas gracias.

    ResponderEliminar
    Respuestas
    1. OK, puede ser por muchas cosas. Mejor será que cuando lo vuelvas a instalar me avises (a traves de messenger o el formulario de contacto) y miro que es lo que pasa.

      Eliminar
  14. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  15. ¡me quedó genial! gracias Minerva.
    Lo que seria ya super genial es que dijeras como se puede poner el buscador en la misma barra. Pero por lo demas O.K,

    gracias!! Saludos desde Andalucía

    ResponderEliminar
  16. ¡Hola! Quiero este tipo de menú unicamente para la plantilla móvil ¿Es posible? Lo instalé tal cual dice ahí pero no me sale bien, sólo me sale el texto y es como si no se cargara bien.

    ResponderEliminar
    Respuestas
    1. La manera más sencilla para desactivarloen desktop será mediante CSS. Si no se carga bien pueden ser muchos motivos, revisa bien el código, una sola llave mal puesta o repetida puede causar estragos.
      Un saludo

      Eliminar
  17. Sos una Genia! Me encantó como quedó en mi blog en construcción. ¿es posible generar un cuarto nivel? no tengo ni idea de htlm y llevo días agregando y sacando lineas sin encontrar la solución. Gracias!

    ResponderEliminar
  18. Hola!! Me ha venido Genial =)

    Pero tengo un problema, cuando minimizo la ventana me aparece el letrero "menú" en vertical, no en horizontal. ¿sabes si me he equivocado en algo?.. ojala me ayudes.

    Gracias!

    ResponderEliminar
  19. Hola, tengo un problema a la hora de ajustarlo al tamaño del blog. Tan solo se me mueven las redes sociales. Las demás paginas se quedan pegadas a la izquierda.
    Un beso y muchas gracias por el post!

    ResponderEliminar
    Respuestas
    1. Hola Violet, he visitado tu blog 16 violet. Lo que te está pasando es bien sencillo, tu plantilla, Voux de Themexpose ya tiene menú, y el mío se ve desplazado por este. Si lo que deseas es tener un menú desplegable instala la plantilla Minimal de Themexpose, es muy parecida a Voux.
      Un saludo!

      Eliminar
  20. Hola Minerva!!
    Gracias por el tutorial, es justo lo que estaba buscando, pero... me ha surgido un problemilla, los iconos de las redes sociales me queda un renglón por debajo de la barra, ¿cómo puedo solucionarlo? te paso el enlace del blog de prueba para que lo veas.
    Muchas gracias.
    Saludos.
    https://prueba739.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Hola Sandra, me parece que no te puedo ayudar. El menú que tienes implementado no es el de este tutorial, difiere en mucho al que yo comparto aquí. Revisa el código y compáralo con el que tomaste de referencia.Espero que puedas encontrar la solución.
      Un saludo!

      Eliminar
    2. Hola, Minerva,
      Muchas gracias por contestar tan pronto.
      Siguiendo tus pasaso lo que me sale es un desastre... a saber dónde he metido la pata, jaja.
      Un saludo.

      Eliminar
    3. Ya he conseguido solucionarlo :)
      Muchas gracias!

      Eliminar
  21. Todo funciona bien excepto los iconos, no se ven los iconos. :(

    ResponderEliminar
    Respuestas
    1. Comprueba que tengas linkado fontawesome. Si examinar tu blog no sabría decirte que pasa.

      Eliminar
  22. Me a servido de mucho pero a la hora de abrir mi blog por el mobil no me sale.

    ResponderEliminar
    Respuestas
    1. Tu plantilla, Voux de themexpose, ya tiene un menú responsive y está interfiriendo. Si lo que deseas que el menú tenga subcategorías puedes instalar cheerup de themexpose.
      Un saludo

      Eliminar
  23. Hola linda, muchas gracias por este tutorial. Me ha encantado, pero he tenido un problema con los iconos, cuando pongo el ratón sobre ellos, no cambia de color ¿qué puedo hacer?. Gracias de ante mano.

    ResponderEliminar
    Respuestas
    1. Hola Catalina. He actualizado el código. Prueba ahora si te funciona. Al cambiar solo el fondo en mi diseño no comprobé si esa función se cumplía. Disculpa las molestias.

      Eliminar
  24. Buenos días Minerva, mil gracias por el tutorial mereces un gran Like... todo funciona muy bien pero cuando lo veo en un celular desaparece las icono tres rallitas para poder llamar al menú oculto. Te agradecería me apoyaras porque me rompo el cerebro y no encuentro la solución.

    ResponderEliminar
  25. Hola, sin poder entrar en tu blog no sé qué puede estar pasando.

    ResponderEliminar
  26. hola MINERVA, de nuevo aqui... como puedo agregar el boton de buscar al menu.

    ResponderEliminar
  27. Hola, en el móvil las letras "menu" me salen colocadas para abajo (no en horizontal, sino en vertical). Ayudaaaaa por faaaa!!!

    ResponderEliminar
  28. Hola!
    ¿Cómo puedo hacer para que sólo se vea en la versión móvil y en el ordenador no?

    ResponderEliminar
  29. Hola! Me encanta tu post. He hecho todo, pero sólo me figura el ícono de Instagram, el enlace me redirige correctamente, pero en el lugar de los otros íconos no sale nada, pero sí genera enlace, lamentablemente también a Instagram. Intenté cambiar el código del ícono con los que da la página Font Awesome, y el de Instagram presisamente está actualizado; sin embargo me sigue saliendo el viejo y no pasa nada. Te paso el link de mi blog para que veas. Te agradezco una repuesta. Besos!

    ResponderEliminar
  30. Me olvidé de darte el link https://mendozatrendy.blogspot.com.ar/

    ResponderEliminar
    Respuestas
    1. Hola Alexandra, he actualizado el post con el enlace a la versión actual de fontawesome y otros ajustes. He estado revisando tu código. Creo que has intentado arreglar un problema de espacio en la barra modificando sin mucha fortuna el código CSS. Te aconsejo que vuelvas a actualizar todo el código y elimines una o o dos categorías del menú. Si no te sale avísame. Un saludo

      Eliminar
  31. Hola, Minerva!

    Estupendo post que me viene de maravilla :) Pero... me ha surgido un problemilla, el icono de pinterest no se ve y no sé a qué se puede deber, lo estoy probando en una prueba (te paso el enlace por si encuentras el motivo: pruebabis2.blogspot.com)

    Muchas gracias,
    Saludos.

    ResponderEliminar
    Respuestas
    1. Y tampoco se ven las rayitas en la versión móvil...

      Eliminar
    2. Ya lo he solucionado :) Muchas gracias!

      Eliminar
  32. como hago para que el menu despegable me quede en la parte de abajo de la cabecera ; y no arriba no me gusta :..ayuda porfavor no se que hacer ,

    ResponderEliminar
  33. Un tutorial magnífico. ¿Se puede generar un icono de lupa para integrar la opción de búsqueda,por favor? Me encantaría aplicarlo en mi sitio o en otros blogs que tengo, pero por más que indago no encuentro ningún tutorial que lo explique. Un saludo.

    ResponderEliminar
    Respuestas
    1. Claro lo tienes en otro post mío http://minervaurora.blogspot.com.es/2017/10/menu-responsive-desplegable-iconos-sociales-buscador.html

      Eliminar
    2. Gracias por responder tan rápido. Justo al poco de leer este post indagando un poco más en Google me ha remitido a esa otra entrada tuya. Millones de gracias por unos tutoriales tan estupendos y útiles.

      Eliminar
  34. He seguido todos los pasos de tu magnífico tutorial, y se me descolocan continuamente los iconos. Se me recolocan en una columna (al ser blancos no se visualizan, pero están ahí). ¿Qué tengo que modificar en tu código para que esto no suceda, por favor? Un saludo.

    ResponderEliminar
    Respuestas
    1. Hola. Ahora no tienes el div con los iconos y no puedo investigar que está pasando.

      Eliminar
  35. ¡hola! tengo un pregunta, si quisiera poner el menu debajo de la cabecera ¿como le haría?

    ResponderEliminar
    Respuestas
    1. No es de fácil adaptación, se tiene que recurrir a código.

      Eliminar
  36. hola, otra cosita, al entrar en la versión movil, no me aparece el menú, no sé q hice pero si me pudieses ayudar te lo agradecería

    ResponderEliminar
    Respuestas
    1. Hola, siento no poder ayudarte. El tutorial que has seguido para añadir el buscador no es el mío.
      Te recuerdo que tengo un tutorial en el que añado un buscador:
      http://minervaurora.blogspot.com.es/2017/10/menu-responsive-desplegable-iconos-sociales-buscador.html
      Espero que te sea de ayuda. Un saludo.

      Eliminar
  37. Hola, saludos! esta genial el menú. estoy intentanto colocar el ícono de messenger, saben si es posible, agradezco de antemano cualquier aporte

    ResponderEliminar
    Respuestas
    1. Creo que la versión que se usa de fontawesome no tiene ese icono https://fontawesome.com/v4.7.0/icons/

      Eliminar
  38. QUedo agradecido contigo mira mi blog http://teologiareformadadelagraciadecristo.blogspot.com/

    ResponderEliminar
  39. Hola Moni, SI solo quiero tener en el menu los iconos de redes sociales centrados, como se lograria? Saludos desde Mexico

    ResponderEliminar
    Respuestas
    1. Hola, en dónde deseas los iconos centrados, ¿en la versión móvil?

      Eliminar
  40. Hola! como hacer para que el menú aparezca al ir despalazandome hacia abajo de la pagina. Lo que quiero es que cuando vaya bajando y ya no se vea la cabera del blog, aparezca el menu. Te lo agradezco

    ResponderEliminar
    Respuestas
    1. Diculpa, no entiendo bien la pregunta. Este menú es fijo, siempre está la parte superior del navegador.

      Eliminar
  41. saludos, muy bueno el post, pero me genero una duda, existe la posibilidad de poner unas mini imagenes en los sub menus, es decir unas fotos Png que sirvan de iconos al lado de los nombres de las categorias

    ejmeplo

    Menu
    (foto pequeña)sub-menu
    (foto pequeña)sub-menu

    ResponderEliminar
  42. Hola. Lo he intentado también con este tutorial, sin busador y el efecto es el mismo. Si quieres revisarlo... porque es curioso que partiendo de la plantilla básica no consiga que funcione. Gracias.
    anaml1234.blogspot.com

    ResponderEliminar
  43. lo he conseguido arreglar modificando el código...

    ResponderEliminar
  44. Hola! Tengo un problema y es que mi plantilla es la sencilla de blogger y intento buscar el Código ]]> pero no aparece en el HTML de la plantilla y no se muy donde ubicar el Código siguiente, no se mucho de informatica jajaaja. Espero y me respondas :)

    ResponderEliminar
    Respuestas
    1. Hola, puedes añadir el código CSS desde la opción de Personalizar tema, no hace falta que entres en el HTML de la plantilla. Pero introduce allí solo el código CSS.

      Eliminar
  45. El código CSS que aparece en este tutorial solo funcionará con los iconos de fontawesome en la versión de font awesome que enlaza. El resto de CSS te está funcionando bien en el blog de pruebas que he examinado.

    ResponderEliminar
  46. Hola! Antes que nada agradecete tus post, super utiles!
    Y tenia una duda, a ver si podias ayudarme:
    Sigo todos los pasos y se instala la barra con los widgets. El problema, que mi anterior barra negra, sigue apareciendo y tapa la tuya que acabo de instalar... Basicamente me bajé una plantilla, la instalé y fui añadiendo cosas que necesitaba.
    Alguna idea de como quitarla? O poner la tuya por delante?
    Gracias!

    ResponderEliminar
    Respuestas
    1. Para quitar la barra original necesitarás saber un poco de HTML. Para colocar mi barra encima podrías añadir en el CSS esta regla y cruzar los dedos para que funcione. #menu{z-index:2000}

      Eliminar
  47. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  48. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  49. Realmente un tutorial impresionante, didáctico, sencillo, y fácil de realizar. Pero tengo una pregunta ¿Se podría cambiar la fuente utilizada en las pestañas? ¿Cómo? Gracias de antemano.

    Pedro Madrigal

    ResponderEliminar
    Respuestas
    1. Claro, está indicado en el código. Por ejemplo en la regla #menu li{font: 11px Arial, sans-serif;/*tamaño y fuente del texto */}. Si no deseas Arial nombra la fuente que deseas. Puedes usar fuentes del sistema o aquellas instaladas en tu plantilla.

      Eliminar
    2. Genial, muchas gracias por la respuesta. Saludos

      Eliminar
    3. Gracias por este tutorial! Me estaba volviendo loca y con este tutorial lo he conseguido a la primera. ¡Gracias mil!

      Eliminar
  50. Hola Minerva Auora, personalize mi menu y le añadi un traductor, al momento de traducir todo bien, el unico problema q la barra desaparece, sabes el motivo, te mando imagen para q lo entiendas:

    https://i.imgur.com/r4ursLi.jpg - Aparece la barra normal

    https://i.imgur.com/n8yc3Wc.png - No aparece la barra al traducir

    ResponderEliminar
    Respuestas
    1. Curioso. Lo he comprobado también con el simulador del navegador y a mi si me se muestra. Supongo que pudiste arreglarlo.

      Eliminar
  51. Hola Minerva, tengo un blog en el que, como menú, lleva tres gadchets. No sé si funcionaría igual y no lo veo, me podrías indicar?

    https://piesdefamosas1.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola de nuevo, hice los cambios en un blog que tengo de pruebas y al final me funcionó. Ya te iré diciendo al trasladar los nuevos códigos al principal. Muchísimas gracias

      Eliminar
    2. Una duda que he visto te han preguntado pero no has contestado. Quiero poner el menú debajo de la cabecera, no encima como propones en el post. No sé hacerlo...me puedes indicar?
      Salu2

      Eliminar
    3. Y otra duda... por qué no aparece la palabra MENU al lado de las tres rallitas en la versión móvil?
      Salu2

      Por cierto, lo puedes ver aplicado en este otro blog:
      recordandoati.blogspot.com

      Eliminar
  52. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  53. Otra cosa que me pasa en otro blog. Le he cambiado el fondo del menú y el color de las tres rayitas pero no se ve el botón con esas tres rayitas. Si pulso a la izquierda (donde se supone que está el menú) sí sale el desplegable con las etiquetas pero sigue sin aparecer el botón.

    Por qué puede ser? Un saludo. La direccion del blog es https://caracolasenlasnubes.blogspot.com/

    ResponderEliminar
  54. Ya lo he solucionado cambiando la opacidad, estaba en 0 y la he subido al 1 pero siguen sin aparecer las tres rayitas... por qué?

    ResponderEliminar
  55. Hola! tu tutorial ha sigo genial, pero me pasa un detalle. No me salen los iconos de redes sociales en la barra superior con el resto de categorías, me aparecen en vertical y los quiero en horizontal. Además han quedado muy pequeños.
    Te dejo mi blog por si puedes revisarlo https://coichet4all.blogspot.com/
    Muchas gracias.

    ResponderEliminar
  56. ¡Hola! Antes que nada muchas gracias por el tutorial, me ha servido mucho. Solo que tengo un problemita y me preguntaba si podrías ayudarme. Cuando agrego dos iconos más (el de goodreads y tiktok) no me aparecen (como si fueran invisibles) pero si paso el cursor si me dirigen a la pagina, además al ponerlos hace que los otros logos se me bajen, y si los quito todo se arregla. He tratado de modificar un poco el código pero ni así me funciona y me preguntaba si podrías echarle un vistazo a mi página. te la dejo aquí abajo. Gracias de antemano, me encanta tu contenido.
    https://golddenwordsbooks.blogspot.com/

    ResponderEliminar
  57. ¡Buenas Minerva!. Estamos en 2023 y me he estado pasando por tu blog para retocar el mío. Buenísimos todos tus posts :)
    Bien, como tengo 0,00 conocimiento de html y css me ha costado bastante implementarlo y es que resulta que se veía bien en el celu pero en la pc se veía desordenado y apretujado...Metiendo mano, me fui al @media de mi plantilla(Simple) y modifiqué el número por defecto del ancho máximo que aceptaba el menú en pantalla grande, y en mi caso, probé en 1500px.
    ¡Y funcionó!, hahah. Lo publico por si a alguien le sirve:
    @media screen and (max-width: 1500px) {
    /* #masthead is the original menu */
    #navtop {
    display:none;
    }
    Me he vuelto ''changa'' como decímos acá, pero valió la pena...¡Mil gracias y saludos desde Argentina!.

    ResponderEliminar
  58. Mil gracias por el aporte, pero ¿cómo se podrían añadir subcategorías a las subcategorías? Es decir, que la Subcategoría 1 también pueda mostrar subcategorías 1.1,1.2, 1.3...

    ResponderEliminar