Menú responsive con iconos sociales para Blogger

domingo, abril 17, 2016



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.6.1/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>&#8801;<span>Menu</span></label>
            <ul class='principal'>
            <li><a href='/'>Inicio</a></li>
            <li><a href='#'>Sobre mi</a></li>
            <li><a href='#'>Categorías<font size='1'>&#9660;</font></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 con subcategorias de MBT modificado por Minerva Aurora----*/
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: 45px;
border-bottom: 1px solid #E9E9E9;/* borde inferior de la barra*/
box-shadow: 0px 2px 7px #dadada;/* sombra 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: 45px;
padding: 0 14px;
text-decoration: uppercase;
color: #333;/*color del texto*/
text-transform: uppercase;/*letras mayúsculas*/
letter-spacing: 1.5px;/*espacio entre letras*/
}
#menu li a:hover{
color: #000;/*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;
background: #E9E9E9;/*color del fondo de la categoria al pasar el ratón*/
}
#menu input{
display:none;
margin:0 0;
padding:0 0;
width:80px;
height:30px;
opacity:0;
cursor:pointer
}
#menu label{
font: 25px  Arial, sans-serif ;
font-weight: bold;
display:none;
width:35px;
height:35px;
line-height:45px;
text-align:center;
}
#menu label span{
font: 12px  Arial, sans-serif;/*tamaño y fuente del texto "menu" */
position:absolute;
left:35px;
text-transform:uppercase;
font-weight: bold;
line-height: 45px;
letter-spacing:0.5px;
}
#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 #E9E9E9;
}
#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{
background: #E9E9E9;/*color del  fondo del submenu al pasar el ratón*/
color: #000;/*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 15px;
height: 45px;
display: inline-block;
}
.iconos a:hover{
background: #E9E9E9;/*color del fondo de la categoria 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;
}
#menu .iconos .fa{
font-size:13px;
line-height: 45px;
color: #333;/*color del icono*/
}
#menu .iconos .fa:hover{
color: #000;/*color del icono al pasar el ratón*/
}
@media screen and (max-width: 800px){ 
#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: 40px;
}
.barra{
width:95%!important;
}
}
header{
padding-top:45px;
}
/*-----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
#000 color negro del texto al pasar el ratón
#F1F1F1 color gris claro de la barra
#E9E9E9 color gris un poco más oscuro de fondo al pasar el ratón

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:45px;
}
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

46 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