Cómo poner un menú en la barra superior con iconos sociales

viernes, 5 de junio de 2015


Hola artistas! Hace tiempo vi que Laura de Miss Lavanda había sacado un tutorial para poner un menú en la barra superior de nuestra plantilla blogger con iconos sociales incluidos. La idea me encantó y enseguida la puse en práctica, pero me di cuenta de que ella utilizaba una fuente para poner los iconos sociales, la Awsome Font.

El resultado me gustaba, pero para mi blog prefería usar imágenes de iconos sociales, en vez de una tipografía. Así que empecé a tocar código hasta que di con el resultado que estaba buscando para Hora Mágica.

Si vosotros también queréis poner un menú con vuestras imágenes de iconos sociales, en este tutorial os voy a explicar cómo hacerlo paso a paso, espero que os sirva y lo podáis poner en práctica para que os quede un blog guai del paraguai :p



CÓMO PONER UN MENÚ EN LA BARRA SUPERIOR CON ICONOS SOCIALES


#1 Primero vamos a poner el código HTML.

Para ello nos vamos a Plantilla ➡ Editar HTMLDentro del recuadro de código debes pulsar CTRL+F (en caso de que tengas Windows) o CMD + F (en caso de que tengas un Mac) para que se te abra el buscador. En él buscamos: <body

Nos aparecerá esto:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Justo debajo de ésta línea de código pegamos:

 <!--Empieza el menú superior -->
<div id="menu-superior">
<div id="menu">
<ul>
<li><a title="TÍTULO 1" href="URL 1">
TÍTULO 1</a></li>
<li><a title="
TÍTULO 2" href="URL 2">TÍTULO 2</a></li>
<li><a title="
TÍTULO 3" href="URL 3">TÍTULO 3</a></li>
&#160;&#160;&#160;

<a href="URL DE RED SOCIAL 1" target="_blank"> <img border='0' height='30' src="URL DE IMÁGEN DE RED SOCIAL 1" width='30'/></a>&#160;&#160;
<a href="URL DE RED SOCIAL 2" target="_blank"><img height='30' src="URL DE IMÁGEN DE RED SOCIAL 2" width='30'/></a>&#160;&#160;
<a href="URL DE RED SOCIAL 2" target="_blank"><img border='0' height='30' src="URL DE IMÁGEN DE RED SOCIAL 3" width='30'/></a></ul></div></div> 
<!-- Acaba el menú superior -->

Ahora tenéis que cambiar lo que está en color:
  • En TÍTULO tenéis que poner el nombre de la página dónde queréis que se dirija al clicar, por ejemplo INICIO o SOBRE MI. Los títulos que tienen el mismo número tenéis que ponerle el mismo nombre.
  • En URL tenéis que poner la URL de la página dónde queréis que se dirija al clicar.
  • En URL DE RED SOCIAL poned la dirección de la red social que queráis poner, por ejemplo la dirección de vuestra página de Facebook.
  • En URL DE IMÁGEN DE RED SOCIAL poned la URL de la imágen que os guste para el icono de la red social que corresponda. Si no tienes claro cómo conseguir la URL de las imágenes que quieres poner al menú, échale un ojo a este tutorial.


#2 Solo falta añadir el código CSS para dar formato a nuestro menú. 

Queremos agradecer a Miss Lavanda que facilitara el código para implementar un menú en su post. Aquí lo hemos adaptado conforme al diseño de nuestro blog.

Nos iremos a Plantilla ➡ Editar HTMLDentro del recuadro de código debes pulsar CTRL+F (en caso de que tengas Windows) o CMD + F (en caso de que tengas un Mac) para que se te abra el buscador. En él buscamos: </b:skin>

Justo antes de éste código pegamos lo siguiente:

#menu-superior {
  background: #c7eff2;  /*Color de la barra, nosotros la tenemos de color azul, pero puedes poner el color que quieras*/
  width:100%;
  height:40px; /*Alto de la barra*/
  padding: 7px 0 0;
  position:fixed; /*Para que la barra se quede fija*/
  z-index:101; /*Para que la barra se quede fija*/
  letter-spacing:2px; /*Espacio entre las letras, para que se vean más separadas*/
}
#menu{
  margin:0 auto;
  width:920px;
  height:30px;
}
#menu ul{
  float:left; /*Donde queréis que quede alineado el menú, left (a la izquierda)*/
  background:none;
  margin:0px;
  padding:0;
  list-style-type:none;
  height:25px;
}
#menu ul li{
  display:block;
  float:left;
  height:30px;
}
#menu ul li a{
  display:block; 
  float:left; 
  color:#666666; /* Color del texto */
  font: 12px "Arial"; /* Tamaño y tipografia del texto*/
  text-decoration:none;
  padding:10px 10px 0 10px;
}
#menu ul li a:hover{ 
  background:#c7eff2; /* Color del fondo al pasar el ratón por encima de cada pestaña, nosotros lo hemos puesto del mismo color para que no cambie*/
  color:#27a7b1; /* Color del texto al pasar el ratón por encima*/
  height:20px;

Todo lo que está en color azul lo podéis cambiar por los valores que queráis. Podéis ir probando hasta que déis con el diseño que más os guste. Si queréis cambiar la tipografia del menú por una fuente de Google Fonts y no sabéis cómo hacerlo, mirad este tutorial dónde os lo explico paso a paso y de manera sencilla.

Y aquí finaliza este súper tutorial, espero que lo pongáis en práctica y que vuestros blogs presuman de menú molón.

También tenemos un tutorial dónde explico cómo poner botones para compartir en las redes sociales en cada entrada del blog. Te resultará muy útil para que se difunda el contenido de tu blog ;)

Si os ha gustado el tutorial te agradeceré que lo compartas en tus redes sociales clicando en estos botones tan monos que tienes debajo, o que nos sigas si te gusta el diseño blogger y los tutoriales DIY que ofrecemos cada semana.

Un abrazo de los muy muy fuertes!!

Laia

21 comentarios:

  1. Muchas gracias por esta lectura necesaria que aporta una apertura a otra dimension para mi desconocida,
    y que a la vez siempre me llamo la atencion...un cordial saludo y muy buena suerte a todos.

    ResponderEliminar
    Respuestas
    1. Me alegro mucho de que te haya servido! Muchas gracias a ti!! Muak!

      Eliminar
  2. ¡Genial! Había leído varios tutoriales sobre el tema, pero siempre me creaban problemas los botones de redes sociales. Con este en cambio no, salvo porque los iconos me quedan más abajo que las páginas del menú, y no sé cómo modificarlo. Un saludo.

    ResponderEliminar
  3. Hola! Tu tutorial me ha venido genial! Había intentado el de Miss Lavanda pero me daba problemas lo de la fuente. Y por fin con tus explicaciones lo he conseguido.
    Pero ahora tengo otro problemilla; con el navegador Google Chrome se ve genial, pero con Firefox y con Internet Explorer no se me ven las imágenes de las redes sociales ni la flechita de subir. He comprobado que en tu blog si se ven perfectamente... ¿Qué he podido hacer mal?
    Muchas gracias, y un abrazo muy fuerte
    Beatriz

    ResponderEliminar
  4. Hola 👋 sigo tu tutorial para poner la barra, la primera parte bien pero con el siguiente código no me sale nada, o me salen las letras del código en la parte superior del blog, lo he intentado un montón de veces pero nada y ya no se si esque no lo pongo bien en la parte de arriba del código

    ResponderEliminar
    Respuestas
    1. A mí tampoco me funciona, ni siguiendo el tutorial de misslavanda ni siguiendo este.
      Pongo los códigos html tal cual indica el tutorial, y al darle a vista previa me salen los nombres de las paginas uno encima del otro sin ningún formato ni nada. Sigo con el tutorial hacia la parte del CSS, y queda exactamente igual. ¿Alguien podría ayudarme?

      Eliminar
    2. A mi me pasa igual. ¿Alguna ayuda, por favor?

      Eliminar
  5. Una lástima... a mi tampoco me funciona. Me salen los nombres a la izquierda arriba... pero no en su sitio

    ResponderEliminar
  6. Una lástima... a mi tampoco me funciona. Me salen los nombres a la izquierda arriba... pero no en su sitio

    ResponderEliminar
  7. Hola excelente tutorial he seguido cada paso y me ha salido yaaay, pero me preguntaba si era posible añadir pestañas o submenús. Espero puedas responderme muchas gracias por el tuto

    ResponderEliminar
  8. GRACIAS, GRACIAS, GRACIAS <3
    Llevaba varios métodos y aquí lo explicáis tan sencillito, me ha servido mucho :)

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

    ResponderEliminar
  10. A ver si os puedo ayudar:

    Hay una errata:

    Donde dice "buscamos: " debería poner :

    buscamos: ]]>

    El código se pega delante de los dos corchetes. Probad así.

    ResponderEliminar
    Respuestas
    1. No me deja poner la expresión bien :

      ]]b:skin: Todo el código css lo tenéis que poner delante de esos dos corchetes.

      Eliminar
  11. Hola, me encanto el tutorial, no sè si pudieras ayudarme a crear una barra de menu desplegable, o hacer un tutarail sobre eso...estarìa muy agradecido. Si dedcides hacerlo, porfa estarìa agradecido de que me lo avisaras

    ResponderEliminar
  12. Hola me ah funcionado a la perfección. Muchas gracias! Además quería saber si se puede hacer que las palabras se quedaran de un lado de la página y los iconos en otro. O sino agregar el buscador como lo tienen ustedes ahora.
    Saludos

    ResponderEliminar
  13. Sería genial que también añadieras al tutorial como has puesto el buscador =) por lo demás todo genial, me salió a la primera!!

    graciass

    ResponderEliminar
  14. Hola! Gracias por el tuto, lo que necesito ahora es poder poner submenus me ayudarías bastante con eso :( espero respusta gracias!

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

    ResponderEliminar
  16. ¡Hola! Soy una bloggera novata.

    Mi blog es nuevo y de a poco lo voy mejorando, por eso se me ha hecho muy útil su tutorial para agregar una barra con los iconos de las redes sociales.
    Lo que me preguntaba era si podrían realizar un tutorial de como agregar un recuadro de búsqueda en esa misma barra, como tienen ustedes en su blog.
    Espero que me puedan ayudar, de todas formas gracias.
    ¡Saludos!

    ResponderEliminar