Menú personalizado sencillo

8/1/15

Image Source
Cuando digo sencillo, es sencillo tanto en aspecto como en instalación. Ya veréis lo fácil que es.
Sí, sé que muchas veces (casi siempre), queremos un menú que no sea el típico de páginas que trae Blogger por defecto, probablemente porque queremos añadir unos enlaces que no tengan nada que ver con esta plataforma: Twitter, Facebook, Bloglovin...

Pues hoy os voy a enseñar gracias a la fabulosa Rosa, a la que todos tenemos en nuestra memoria, cómo hacer un menú la mar de sencillo.


Lo primero que tenéis que hacer pegar debajo de <head> o en nuestro CSS esto:

<style type='text/css'>
#chromemenu{
width: 97%;
font: 11px Tahoma,Geneva,sans-serif;
font-weight: normal;
letter-spacing: 3px;
text-transform: uppercase;
background: #fff;
margin-bottom: 35px;
border-bottom: 1px solid #dcdcdc;
}
#chromemenu:after{
content: &quot;.&quot;
display: block;
height: 1px;
clear: both;
visibility: hidden;
}
#chromemenu ul{
width: 100%;
background: transparent;
padding: 10px 0;
margin: 0;
text-align: center;
}
#chromemenu ul li{
display: inline;
}
#chromemenu ul li a{
color: #212121;
padding: 5px;
margin: 10;
text-decoration: none;
}
#chromemenu ul li a:hover,  #chromemenu ul li a:focus{
color: #dcdcdc;
font-weight: bold;
}
</style>

Lo que está en verde es lo que ocupará el ancho del menú, si lo queréis a todo el ancho, deberéis poner 100%; lo rojo es el tamaño y la fuente, podéis cambiarla por lo que queráis, y lo azul indica que el texto debe estar en mayúsculas. Si lo queréis todo en minúsculas, sólo debéis cambiarlo por lowercase.

Pero ahí no acaba todo, si hacéis click en vista previa no tendréis absolutamente nada visible, por lo que ahora debemos buscar </header> y debajo pegar lo siguiente:

<div id='chromemenu'>
<ul>
<li><a href='TU ENLACE'>Menú 1</a></li>
<li><a href='TU ENLACE'>Menú 2</a></li>
<li><a href='TU ENLACE'>Menú 3</a></li>
<li><a href='TU ENLACE'>Menú 4</a></li>
</ul> </div>

Tan sólo tenéis que poner vuestros enlaces donde corresponde y añadir el nombre del menú. Si queréis añadir alguno más, sólo tendréis que copiar lo que está en verde y pegarlo a continuación. Para eliminar, sólo tendrás que borrar tantas etiquetas como necesites.

De esta forma el menú aparecerá bajo la cabecera, si lo queréis sobre esta, sólo debéis copiar el código anterior justo encima de <head> en lugar de bajo </header>.

Si queréis cambiar la fuente, sólo tenéis que seguir este tutorial y poner el nombre de la fuente nueva en lo que está marcado en rojo. 

¡Listo! Recordad que antes de guardar cambios, es preferible tener una copia de seguridad de vuestra plantilla y sobre todo, ver siempre la vista previa. 

13 comentarios:

  1. Hola!!
    Yo para estas cosas soy un desastre, a veces me animo pero tengo que leer cincuenta veces para lograr comprendedlo xD.
    Parece fácil, por el momento me quedo con tu plantilla, quiero al menos tenerla unos seis meses y luego volver a renovar el blog. Por cierto, tienes algún tutorial para realizar cabeceras?? sencillo ya que con el photoshop me llevo pésimo.
    Besos.

    ResponderEliminar
    Respuestas
    1. Uff, cabeceras, eso es tan subjetivo que no sé si sería buena idea hacer un tutorial sobre eso. Si quieres puedo hacer una entrada sobre fuentes que me gustan mucho y que para mi gusto, quedarían muy bien en una cabecera, pero ya te digo, sería todo en función de mis gustos. Es muy subjetivo todo ese tema.

      ¡Besos!

      Eliminar
    2. No hay problema!! todo serviría para tener en cuenta y ampliar los gustos, veo que últimamente se ha puesto de moda los diseños sencillos, minimalistas, con pocas imágenes en las cabeceras o simplemente solo el titulo, me gusta ya que no nos perdemos en tanta imagen y color. Todo consejo o idea viene bien!
      Besos.

      Eliminar
    3. A mí me encantan los diseños así, creo que se le da más importancia al contenido que es lo que realmente debe tenerla. Eso y acompañar las entradas con buenas imágenes, creo que es un gran punto a favor para un blog.

      ¡Besos!

      Eliminar
  2. ¡Hola! ¿Cuál sería el resultado final?
    Muy útil el tutorial, un beso!

    ResponderEliminar
    Respuestas
    1. En realidad el resultado es el que tú le quieras dar, pero para que te hagas una idea, es el código de la plantilla que regalé por Navidad :D

      ¡Gracias!

      Eliminar
  3. Me encantan estas entradas ,porque para gente negada como yo en estas cosilla se agradece mucho la ayuda! :D

    ResponderEliminar
  4. ¡Hola!
    Muchas gracias por hacer este tipo de tutoriales. Soy un poco (bastante) negada para el HTML y este tipo de post ayudan un montón.

    ResponderEliminar
  5. Muchisimas gracias!!! Como siempre :)

    ResponderEliminar
  6. ¡Hola guapa!
    Estoy renovando el blog al completo, así que me viene muy bien tu tutorial para darle un cambio :)
    Solo un pregunta: ¿Cómo puedo hacer para que se ponga en color el enlace que se está visitando? ¡¡Gracias!! Muack.

    ResponderEliminar
  7. hola, solo tenia la duda de como hacer si quería un menú desplegable
    muchas gracias

    ResponderEliminar

No está permitido en este blog dejar enlaces en los comentarios. Tu nick es un enlace directo a tu perfil, donde si queremos, podemos visitar tu blog.

Somos librófagos, pero si haces spam también te comeremos.

En caso de no cumplir con esta norma, tu comentario será dirigido directamente a la carpeta SPAM.

¿Colaboramos?
Estudio
Galería
Mery's Notebook © Todos los derechos reservados