Como hacer una barra de menú horizontal para tu blog (Parte I)


Esto así de repente parece muy difícil y muy aburrido, pero si te digo que tardaras menos de 10 minutillos en hacerlo a lo mejor te lo piensas y decides colocar una barra de menú como la mía en la parte superior ¿te animas? Sólo tienes que pegar texto y subir imágenes, que además, te las regalo yo

Así que ya lo tienes todo para utilizar ese espacio muerto que queda entre tu banner superior y el resto del blog, un espacio que recomiendo utilizar para poner una barra de menú, por lo siguiente:

  • Nuestro público encontrará fácilmente los temas principales de nuestro blog.
  • Queda muy ordenado y organizado el contenido de nuetro blog.
  • Podemos utilizarlo para dirigirlo a un post concreto, para una etiqueta, o para un índice si tenemos muchos post publicados sobre un mismo tema (por ejemplo proyectos DIY).

El que yo os enseño a hacer aquí es muy simple, es decir, que sólo vais a necesitar añadir un gadget en el diseño de vuestro blog, que la mayoría sabéis hacerlo, y luego subir una imagen a vuestro blog, que también sabéis hacerlo.

Existen muchos tipos de barras horizontales para poner en vuestros blogs, pero he conseguido modificar algunas cosillas para que sea lo más sencillo posible y lo más importante, no tocar el código html de nuestra plantilla, eso que da tanto miedo a veces. 

La que yo os voy a enseñar a hacer es una barra muy sencilla, pero muy personalizada al aspecto de nuestro blog, y con las imágenes que queramos nosotros, aquí tienes un ejemplo:










Bien, en primer lugar, debes seguir las instrucciones tal cual te las presento para no romper nada, y si quieres trabajar con más seguridad, te aconsejo que hagas una copia de seguridad de la plantilla de tu blog. Dependiendo del diseño de tu plantilla, es posible que la barra se vea de formas distintas, si tienes dudas puedes preguntarme en klaudisseny@gmail.com.


Pasos a seguir para crear una barra de menú horizontal para nuestro blog:




En primer lugar:

  • Ves al apartado diseño de tu blog y añade un gadget del tipo HTML/Javascript.
  • Engancha lo que encontrarás en este .txt : Código para barra horizontal

Todas las partes del texto que se señalan en lila son personalizables a vuestro gusto, es decir, que se pueden modificar como deseéis. Ahora vamos a ver paso a paso que significa cada parte y que podéis modificar.

En la primera parte del texto encontrarás esto:


<div id="menuhorizontal">
<ul id="menuh">
   <li><a href="tudireccióndelblog">HOME</a></li> 
   <li><a href="tudireccióndelblog">INSPIRACIÓN</a></li>
   <li><a href="tudireccióndelblog">DIY</a></li>
   <li><a href="tudireccióndelblog">COCINA</a></li>
   <li><a href="tudireccióndelblog">CONTACTO</a></li>


Este código sirve para formar más botones y poner el texto que te apetezca en cada uno de ellos. Deberás copiar y pegar una linea por cada botón que quieras en tu barra, será todo este texto:


<li><a href="tudireccióndelblog">HOME</a></li>

(todo este texto sirve para un botón, copia tantas veces como botones quieras en tu barra)

En el texto de 'tudireccióndelblog' pondrás la dirección de tu blog a la que quieres que se dirija tu botón, y en las letras en mayúscula 'HOME' lo que quieres que ponga en el botón. 

Ejemplo: Quiero un botón que me lleve a la página principal de mi blog y el texto del botón quiero que sea HOME, así la instrucción la rellenaré de la siguiente forma: 


<li><a href="http://klaudisseny.blogspot.com.es/">HOME</a></li>


Así es como quedará el botón:



Segunda parte personalizable y la que sirve para escoger la imagen de nuestro botón en estado normal (sobretodo, modifica el apartado de #menuh a, no otros apartados).

Primero debes subir a tu google + una imagen de fondo, yo te regalo unas cuantas aquí, las he hecho de diferentes formas para que pegue con tu blog, espero que te gusten :) .

Bien, pues sube una de estas imágenes (o cualquier otra que tengas en tu ordenador), ves a ver la foto en tus fotos de google+, abre la imagen, y con el botón derecho copia la dirección url de la imagen. También puedes subir la imagen a  páginas web que sirvan para almacenar archivos, eso ya depende detus preferencias.

Una vez tengas la url de la imagen copiada deberás engancharla en la parte del código donde pone 'Dirección de tu imagen de fondo'. Justo abajo puedes cambiar el color del texto también.


#menuh a {
    background: #ffffff
url(la dirección de tu imagen de fondo)no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0 7px;text-decoration:none; ) bottom right no-repeat;


    color: #7e7c7c; 
   

Depende de la imagen que escojas quedará de una manera u otra, también puedes utilizar fotos tuyas, ejemplos:





También puedes cambiar el color del texto del botón, sustituyendo #7e7c7c por el color que quieras

color: #XXXXXX;



¡Ya está! ¿Ha sido rápido no? Así tendrás una barra horizontal con imágenes muy chula para tu blog, cuando pases por encima el ratón el texto cambiará de color.














¿Quieres probar? Aún puedes cambiar muchas cosas más de tu barra horizontal, sólo necesitas un poco de paciencia y un ratito más, no mucho :)

Tercera parte, como va a quedar nuestro botón cuando pasemos el ratón por encima. Si dejas el código como está, ahora la imagen se muestra siempre fija, y cuando pasamos el ratón por encima, cambia el color del texto del botón. Podemos modificar muchas cosas y personalizar el botón como nos apetezca.

En mi barra de menú horizontal el efecto es este:



En estado normal tengo una imagen de rayas, y cuando pasas por encima el ratón he escogido un color liso. El código para modificar el efecto del botón cuando pasas el ratón por encima y con el cual trabajaremos es este:


#menuh a:hover {
    background: #faf7fd  url(dirección de tu segunda imagen de fondo) bottom center no-repeat; 
    color: #aeaab0;


Opciones que tenemos modificando este código:

  • Quiero la misma imagen cuando pase el ratón por encima: Déjalo el código tal como está, si sólo quieres que cambie el color del texto modifica la parte donde dice 'color: #aeaab0', sustituye  #aeaab0 por el color que te guste. Quedará así: color: #XXXXXX;
  • Quiero un color liso cuando pase el ratón por encima : Puedes escoger un color liso para el botón (como lo tengo yo en mi barra horizontal) modificando el color de 'background: #faf7fd'. Sustituye #faf7fd por el color que te apetezca y asegúrate después de borrar la frase 'Direccion de tu segunda imagen de fondo'. Debe quedar asíbackground: #XXXXXX  url() bottom center no-repeat; 
  • Quiero otra imagen cuando pase el ratón por encima: Si prefieres otra imagen diferente a la utilizada anteriormente, copia la dirección de tu segunda imagen en el álbum de google + y enganchala en la parte donde pone 'dirección de tu segunda imagen de fondo'.
  • En todas las opciones podrás modificar el color del texto del botónmodifica la parte donde dice 'color: #aeaab0', detrás de la almohadilla pon el código de color que vaya bien con tu blog. 


Y esto es todo para tener una barra de menú horizontal con imágenes personalizables, si quieres la tuya, ¿a que esperas?

¿que te ha parecido? ¿te atreves a hacerte una?

Si te parece que es difícil y quieres probar con otro tipo de barra, aquí tienes otro tutorial para poder experimentar :P

Besos, Clau





45 comentarios:

  1. ¡¡¡Muchísimas gracias por la información, me parece muy útil!!!

    ResponderEliminar
    Respuestas
    1. Gracias Irene!! Ya me contarás que tal te queda :) Besos

      Eliminar
  2. Que buenisimo que esta, me quedo por aquí que me encanta lo de diseños blog un besito te invito a mi blog

    ResponderEliminar
    Respuestas
    1. Gracias Julissa!! Ahora mismo me paso!
      Besines

      Eliminar
  3. Muchas gracias!!! Tenía ganas de saber cómo hacerlo.
    PD. vengo de la fiesta de enlaces

    ResponderEliminar
    Respuestas
    1. Hola Luz! Me alegro que te guste, si lo pruebas y tienes problemas no dudes en preguntar! besos

      Eliminar
  4. Hola, vengo de la fiesta de enlaces, soy Tatiana. Yo la verdad es que tengo una barra, pero no me atrevo a cambiarlo, ja, ja. Gracias por la información. Un saludo.

    ResponderEliminar
    Respuestas
    1. Ya suele pasar...a veces tenemos algo ya hecho y da como miedo de tocar ¿no? A mi es que me gusta el riesgo, ajajaja Por eso no se ni las veces que he tenido que tirar de copia de seguridad porque me habia cargado el blog jijijij
      Besos

      Eliminar
    2. Ya suele pasar...a veces tenemos algo ya hecho y da como miedo de tocar ¿no? A mi es que me gusta el riesgo, ajajaja Por eso no se ni las veces que he tenido que tirar de copia de seguridad porque me habia cargado el blog jijijij
      Besos

      Eliminar
  5. Como haces para que te quede centrado y no te aparezcan unas finas líneas alrededor de cada una de las etiquetas? Muchas gracias por explicarlo taaaan bien! :)

    ResponderEliminar
  6. Hola!
    Si, lo de la linea a veces pasa dependiendo de algunos códigos de la plantilla base.
    Prueba de poner lo siguiente

    border: 0px solid #ffffff; /*quita la linea de arriba*/

    Esto debes ponerlo dentro del grupo #menuh y antes de la llave que cierra }

    Si tienes dudas o no te sale enviame un email a klaudisseny@gmail.com

    A ver si se te soluciona :)

    ResponderEliminar
  7. Sí, se me ha solucionado, al menos no hay un marco alrededor. Por cierto, ¿hay alguna manera de centrarlo todo? Muuuuuuuchas gracias! :)

    ResponderEliminar
  8. Prueba a poner en margin el valor auto, a ver si funciona. También puedes jugar con el valor float, poniendo left, right o center.
    A ver si asi :)

    ResponderEliminar
  9. Hola me pareció interesante lo que compartes. Bien, necesito que me ayudes porque soy novato: yo tengo un blog que hace un tiempito atrás le puse una barra de menú, pero que por modificaciones que le hice al blog ( quité las imágenes que tenía en la barra lateral derecha y ajusté el ancho del blog ) me quedó "desordenado" por decirlo de alguna forma los títulos de la barra. Debo aclarar que la barra de menú posee 17 secciones.También que la barra no posee sub-menus. Si yo quisiera cambiar mi barra de menú por la que tú ofreces, ¿debería eliminar mi barra de menú actual? en ese caso ¿como debo hacer? Basicamente lo que quisiera es tener una barra de menú prolija, pero no me animo a modificar nada para no perder la información que hay en cada sección. Espero no haberte complicado. En todo caso si quieres te paso el link del blog para que entiendas a que me refiero con un menú "desordenado". Espero tu respuesta. Gracias!

    ResponderEliminar
  10. Buenas tardes,
    Primero de nada quiero decir que llevo un par de días para encontrar una buena information de: como hacer una barra de menú. Soy bastante nueva con el tema de blogs y me gustaría aprender las cositas...Gracias a ti y tus explicacione tan simples para "los novatos" lo consegí sin problema aunque el castellano no es mi lengua materna.
    Muchas gracias

    ResponderEliminar
  11. Hola,
    Menos mal que he encontrado tu blog, había leido otros tutoriales y en ninguno me había quedado tan claro como con el tuyo.

    Muchísimas gracias por hacer tutoriales tan entendibles y buenos.

    Saludos.

    ResponderEliminar
  12. Despues del diseño, como enlazo los botones a la busqueda de etiquetas???

    ResponderEliminar
    Respuestas
    1. Hola! Tendrás que conseguir la dirección de la etiqueta, es decir, la dirección de la página que reúne todas las entradas de una misma etiqueta, normalmente lleva label en la dirección, por ejemplo: http://klaudisseny.blogspot.com.es/search/label/Crochet%20and%20Knit

      Eliminar
  13. Hola, he encontrado tu blog buscando como hacer la barra horizontal y quería darte las gracias por tu ayuda. Yo era de esas que le da miedo... y tu explicación me ha servido de mucho.

    ResponderEliminar
  14. muchas gracias! aunque no termino de entenderlo bien como meto yo ahora mi publicaciones ahi? :(

    ResponderEliminar
    Respuestas
    1. Hola! Con la dirección de tus etiquetas o tus entradas fijas :)

      Eliminar
  15. Holaa! Verás es que he puesto la barra y me ha quedado muy bien. El problema es que solo puedo meter una reseña, es decir, cuando pego el código y el link de la otra reseña y luego pincho en el botón de reseñas solo me sale una y la otra no.. Como lo arreglo? Graciaas, me encanta tu blog:)

    ResponderEliminar
    Respuestas
    1. Hola! No acabo de entender lo que necesitas, si todavía está por solucionar, envíame un email a klaudisseny@gmail.com
      besos

      Eliminar
  16. Yo que soy una negada en cuanto a este mundillo, esto ha sido como agua en un desierto. ¡Gracias! Poco a poco voy avanzando y sé hacer más cositas, He podido hacer la barra de menú, pero para enlazar las entradas al botón sólo me deja una, no todas U_U seguiré averiguando, ¡gracias igualmente!

    ResponderEliminar
    Respuestas
    1. Hola! Me he pasado por tu blog y parece que ya lo tienes solucionado no? Me alegro :)

      Eliminar
  17. Gracias por la información! Mi menú ha quedado muy lindo gracias a tu ayuda. Saludos <3

    ResponderEliminar
  18. Hola, Muchas gracias! me ha servido mucho tu blog. Podria saber como cambiar la letra?

    ResponderEliminar
    Respuestas
    1. Hola! Podrás cambiar la letra en la parte de avanzado dentro del diseño de tu blog, ahí te deja cambiar por lasx predeterminadas. un saludo

      Eliminar
  19. En verdad me parece en chino!! jaja pero así pensé cuando hice mi blog por primera vez y ya lo he mejorado bastante aprendiendo así de personas generosas que como tu gustan de compartir sus conocimientos! Muchas gracias! Lo intentaré! :D

    ResponderEliminar
  20. MUCHAS GRACIA MI BLOG ESTA EMPEZANDO A TENER FORMA

    ResponderEliminar
  21. Muchas gracias por el post!! Habia buscado por todas partes como hacer esto y nada me funcionaba y vi tu post y dije por probar no pierdo nada... ¡Y mira! Me funcinó <3

    ResponderEliminar
    Respuestas
    1. Me encanta leer comentarios así! Gracias por pasarte! Muas

      Eliminar
  22. Muchas gracias por la información. Estoy comenzando un blog y necesitaba esto. Si quieres ver cómo quedó te dejo mi url y me dices qué tal me quedó, saludos y muchas gracias de nuevo.

    ResponderEliminar
  23. ¡Hola! Muy buena aportación, me ha servido mucho. Solo tengo una duda, ¿cómo puedo cambiar la fuente de la letra? Muchas gracias ^-^

    ResponderEliminar

Gracias por decir la tuya :)