Cómo hacer un menú vertical con imágenes para blogger?

17.9.14

He descubierto que me encanta hacer tutoriales aunque creo que me cuesta un poquito explicar bien, bien espero agarrarle maña pronto  jeje…
En esta ocasión les traigo este tutorial fácil de hacer con un resultado muy bonito y estético para  nuestro blog! Ya lo he dicho muchísimas veces ¡Me encantan las cosas personalizadas! Y hacer nuestro menú a juego con el blog es la ocasión perfecta para poner a volar nuestra imaginación y creatividad, son una de las cosas que más amo, bueno… siempre y cuando tenga tiempo jeje! Tengo una hija de dos años y absorbe mi tiempo como esponja por eso me acuesto tarde y me levanto bien tempranito, con decirles que solo duermo 5 o 6 horas!!!  Pero hay días que todo se junta y a las 9 de la noche ya ando babeando la almohada!!!

Bueno después de escribir hablar un ratito pasamos al tutorial! Les explico paso a paso como lograrlo y les dejo dos ejemplos para que se den una idea de cómo queda el resultado final 





  • Antes de iniciar con todo, debemos de hacer una lista de las secciones que vamos a  utilizar. Tomarse tiempo  para hacer esto y buscar las que más destacan en nuestro blog, también debes de tener listos los botones que llevara cada etiqueta.











  • Agregamos un gadget de imagen



  • Después de guardar nuestro primer botón, vamos a diseño y movemos nuestro gadget de imagen del lado derecho o izquierdo, del lado donde queremos que aparezca nuestro menú. 
  • Ya tenemos el primer botón colocado!! Ahora solo falta repetir los pasos anteriores las veces necesarias para terminar nuestro menú. 








·        Cualquier duda me pueden preguntar en los comentarios y con gusto les responderé..


Un abrazo ♥

imagen


imagen



imagen



imagen






A C T U A L I Z A C I O N  06/04/2015

Después de leer varios comentarios sobre como juntar los gadgets de imágenes para que el menú quede más juntito, les explico como hacerlo.

1. Lo primero que necesitamos es saber el ID de gadget que vamos a juntar.

→ Para ello vamos a  Diseño  y colocamos el puntero del mouse sobre la palabra editar del gadget que queremos saber y automáticamente podemos ver en la parte de abajo  del lado izquierdo aparece una barra de color gris con varios textos y por donde esta el cuadro de color rojo esta el número de gadget o el ID como se conoce, entonces en este ejemplo es Image2



2. Luego de tener el ID de cada gadget vamos a necesitar este código

#Image2{
margin-bottom: -20px !important;

}

Este código lo que hace es que reduce el espacio del gadget que tiene por delante.
Ejemplo:
 Tenemos dos gadgets de imagenes image 2 - image3
Al aplicar el código anterior lo que se hace es que image3 sube porque se reduce el espacio entre los dos gadgets

3. Y donde pego el código? Vamos a Plantilla → personalizar → opciones avanzadas → Agregar Css


Vamos a gregar todos los códigos que sean necesarios solo basta con dar un par de Enter y volvemos a pegar el código recordando cambiar el ID de cada gadget.

Importante: En la parte del código donde dice-20px quiere decir el espacio que va a reducir de dos gadgets, puede ser mayor o menor  todo depende de que tan juntos o separados los queramos.

Y ahora si, esto todo ♥ Si hay dudas me las dejan en comentarios que con gusto se las respondo!




más post bonitos que de seguro te van a interesar

40 comentarios

  1. Muy chulo! Un buen tutorial y los ejemplos muy bonitos. Si me animo lo hago para mi blog :)

    ResponderBorrar
    Respuestas
    1. Hola Ana! Gracias ♥ Espero te animes, este menú queda precioso en el blog! Ahi me cuentas :)

      Borrar
  2. Me ha gustado mucho. El quid es si lo consigo, que con estas cosas desespero. Tengo el blog algo soso y me gustaría un cambio per8o, como te digo, ya veremos...
    Un saludo y muchas gracias,

    ResponderBorrar
    Respuestas
    1. Hola Carmen, si lo intentas despacio y con ánimos de seguro lo consigues veras como tu blog cambia muchísimo con este menú! Ahi me cuentas!

      Borrar
  3. Qué fácil resulta explicado así de bien, me lo apunto para el próximo cambio que haga en el blog!
    Y por cierto, que bonito has dejado el tuyo!!
    Besos!

    ResponderBorrar
    Respuestas
    1. Hola Ana! trate la forma de explicarlo lo mas que pude y creo que lo logre jeje porque si se entiende jeje!! ♥ Muy bien, ahi me cuentas para ver el resultado final de seguro te quedará genial ♥

      Borrar
  4. Hola, tienes un blog súper interesante y práctico, me encanta a si que me quedo por aquí.
    Un saludo

    ResponderBorrar
  5. preciosa me encanta este lugar con tutoriales y cosas tan útiles, por acá me quedo!

    ResponderBorrar
  6. Muy bien explicado. Lo mad dificil hacer unos botones chulos!un beso

    ResponderBorrar
    Respuestas
    1. Hola Ana, huuy sii.. Tienes que estar inspirada jeje ...

      Borrar
  7. Qué interesante!
    (Yo es que estoy enamorada de tu blog!) Éste tuto me lo guardo para cuando esté un poquito más tranquila de trabajo porque me interesa ponerlo en práctica.
    ¡Muchas gracias por compartirlo!
    Un beso,

    Manuela.

    ResponderBorrar
    Respuestas
    1. Hola Manuela! Pues se ha sonrojado el blog jejeje! Que linda gracias! Claro, cuando tengas tiempo de hacerlo ya sabes cualquier duda me comentas :D

      Borrar
  8. Ejem...¡Hola! Me gusta tu blog, *-* y me pregunta es, ¿como le haces las imágenes o en que programa? Los ejemplos de menú, me parecen muy bonito y quisiera hacer imágenes así. :)

    Muchas gracias.

    ResponderBorrar
    Respuestas
    1. Hola Vanesa! Gracias ♥ Las imágenes se abren en ilustrator, puedes bajarte varias de aquí freepik.es

      Borrar
  9. ¡Muuuuuuchas gracias! Por todos los tutoriales que tienes, me han servido de mucho. :)

    ResponderBorrar
    Respuestas
    1. De nada, para mi es un gusto compartir lo que voy aprendiendo!

      Borrar
  10. Hola Wendy, nos estamos poniendo al día con los tuoriales!! :) IUPIIII!
    Ahora, pregunta (y quizás ya lo hayas explicado pero no lo vimos), qué representa el nombre del título? (No nos deja escribir el código, "Su HTML no es aceptable: Etiqueta no permitida: H2")
    Un beso grande!!
    Miriam y Vero.-

    ResponderBorrar
    Respuestas
    1. Hola, bueno el titulo del gadget en este tutorial no lo necesitamos porque si le escribes algo perderá el diseño el menú! y ese codigo es para que puedas guardar el gadget de imagen sin titulo ya que si lo intentas guardar *sin nombre no te deja guardar el gadget te dice que tienes que ponerle nombre!

      Borrar
    2. Ah, genial!! Gracias por el dato!! ;)

      Borrar
  11. Estoy aprendiendo mucho con tu blog. Necesitaría saber que dimensiones deben tener los botones para las pestañas. Los creo desde un ipad con canva. Muchas gracias por tu amabilidad

    ResponderBorrar
    Respuestas
    1. Hola, tiene que tener la medida del lateral de tu blog, no sabría decirte que medidas pero por ejemplo mi blog tiene de ancho 230px!

      Borrar
  12. Hola!! Y si queremos poner el menú horizontal arriba del blog es el mismo proceso? Muchas gracias

    ResponderBorrar
    Respuestas
    1. Hola! No, no es el mismo proceso, eso ya es con código! En la escuelita virutal vemos eso, si quieres te apuntas para recibir la clase!

      Borrar
  13. Hola linda! Tu tutorial me ha fascinado, eres buenísima en esto, de verdad. Solo tengo una duda, ¿como has hecho los iconos tan monos? como el dibujo de la paleta, del pastelito y así. Me ayudarías mucho si me explicarás, gracias!

    ResponderBorrar
    Respuestas
    1. Hoa Leah! Los iconos los consegui de esta página que es muy bonita freepik.es

      Borrar
  14. Hola! he seguido tus pasos y me ha salido a la primera...pero ... a mi gusto se quedan muy separadas al llevar cada una una imagen.. ¿hay alguna forma para que se queden más juntitas? gracias!

    ResponderBorrar
  15. Hola me Han gustado tanto tus tutoriales que empece con las etiquetas soy nueva en esto y bueno estoy tratando te dire que puse una etiqueta pero solo se ve como una foto no hace nada es asi como debe de ser???

    ResponderBorrar
    Respuestas
    1. Hola, bienvenida al blog! Me alegra que los tutoriales te sean útiles.
      Este es un menú con imágenes así que al darle clic a la imagen te debe de llevar a alguna dirección, eso lo colocamos en vinculo... En Donde dice vinculo debes de colocar una dirección web.

      Borrar
  16. Hola, que lindo blog! Hoy me estaba dando a la tarea de personalizar mi nuevo blog y tu tutorial me pareció muy practico pero fíjate que no me gusta que queden tan separadas las imágenes. ¿Sabes como hacerle para que las imágenes queden mas "pegadas" una con la otra?

    ResponderBorrar
  17. Hola, hola... Fijate que no puedo pegar el código acá no me deja... Voy a actualizar el tutorial explicando como juntar los gadgets de imágenes.

    ResponderBorrar
  18. Hola linda!
    tengo un problema :c
    Cuando inserto el código para que las fotos queden más cerca, no me lo acepta. O sea, dice que la plantilla está aceptada pero no hay ningún cambio. ¡Muero, necesito ayuda!

    ResponderBorrar
    Respuestas
    1. Hola, perdón por responder hasta ahora, anda de viaje, puedes intentar pegar el código directo en la plantilla, hasta arriba mas o menos por donde este el código de los post, a mi me ha funcionado asi cuando el css no me da ningun cambio.

      Borrar
  19. Hola Wendy. Ante todo déjame felicitarte por tanta creatividad. Estoy tratando de colocar como fondo en el menú de mi blog en construcción, imágenes que simulan un "brochazo" de pintura y sobre ella se escribe. No he podido encontrarlas, ¿podrás ayudarme, por favor?. Mil y mil gracias.

    ResponderBorrar
    Respuestas
    1. Hola, hola ... Mira puedes buscar en Pinterest "watercolor brush" No sé si manejas illustrator o photoshop ahi consigues pinceles y puedes hacer las imágenes que necesites.

      Borrar
  20. Muchas gracias por este post, me ha resultado de mucha ayuda ^^. Saludos

    ResponderBorrar
  21. Hola!
    Yo no se porque pero no me funciona! :( he intentado poner un numero mas grande para reducir mas el espacio, pero no funciona

    ResponderBorrar
  22. No se como habrá quedado pero muchas gracias por la ayuda. Me encanta tu blog. Besin

    ResponderBorrar

Gracias por tus comentarios

17.9.14

Cómo hacer un menú vertical con imágenes para blogger?

He descubierto que me encanta hacer tutoriales aunque creo que me cuesta un poquito explicar bien, bien espero agarrarle maña pronto  jeje…
En esta ocasión les traigo este tutorial fácil de hacer con un resultado muy bonito y estético para  nuestro blog! Ya lo he dicho muchísimas veces ¡Me encantan las cosas personalizadas! Y hacer nuestro menú a juego con el blog es la ocasión perfecta para poner a volar nuestra imaginación y creatividad, son una de las cosas que más amo, bueno… siempre y cuando tenga tiempo jeje! Tengo una hija de dos años y absorbe mi tiempo como esponja por eso me acuesto tarde y me levanto bien tempranito, con decirles que solo duermo 5 o 6 horas!!!  Pero hay días que todo se junta y a las 9 de la noche ya ando babeando la almohada!!!

Bueno después de escribir hablar un ratito pasamos al tutorial! Les explico paso a paso como lograrlo y les dejo dos ejemplos para que se den una idea de cómo queda el resultado final 





  • Antes de iniciar con todo, debemos de hacer una lista de las secciones que vamos a  utilizar. Tomarse tiempo  para hacer esto y buscar las que más destacan en nuestro blog, también debes de tener listos los botones que llevara cada etiqueta.











  • Agregamos un gadget de imagen



  • Después de guardar nuestro primer botón, vamos a diseño y movemos nuestro gadget de imagen del lado derecho o izquierdo, del lado donde queremos que aparezca nuestro menú. 
  • Ya tenemos el primer botón colocado!! Ahora solo falta repetir los pasos anteriores las veces necesarias para terminar nuestro menú. 








·        Cualquier duda me pueden preguntar en los comentarios y con gusto les responderé..


Un abrazo ♥

imagen


imagen



imagen



imagen






A C T U A L I Z A C I O N  06/04/2015

Después de leer varios comentarios sobre como juntar los gadgets de imágenes para que el menú quede más juntito, les explico como hacerlo.

1. Lo primero que necesitamos es saber el ID de gadget que vamos a juntar.

→ Para ello vamos a  Diseño  y colocamos el puntero del mouse sobre la palabra editar del gadget que queremos saber y automáticamente podemos ver en la parte de abajo  del lado izquierdo aparece una barra de color gris con varios textos y por donde esta el cuadro de color rojo esta el número de gadget o el ID como se conoce, entonces en este ejemplo es Image2



2. Luego de tener el ID de cada gadget vamos a necesitar este código

#Image2{
margin-bottom: -20px !important;

}

Este código lo que hace es que reduce el espacio del gadget que tiene por delante.
Ejemplo:
 Tenemos dos gadgets de imagenes image 2 - image3
Al aplicar el código anterior lo que se hace es que image3 sube porque se reduce el espacio entre los dos gadgets

3. Y donde pego el código? Vamos a Plantilla → personalizar → opciones avanzadas → Agregar Css


Vamos a gregar todos los códigos que sean necesarios solo basta con dar un par de Enter y volvemos a pegar el código recordando cambiar el ID de cada gadget.

Importante: En la parte del código donde dice-20px quiere decir el espacio que va a reducir de dos gadgets, puede ser mayor o menor  todo depende de que tan juntos o separados los queramos.

Y ahora si, esto todo ♥ Si hay dudas me las dejan en comentarios que con gusto se las respondo!




Share to Facebook Share to Pinterest

40 comentarios:

  1. Muy chulo! Un buen tutorial y los ejemplos muy bonitos. Si me animo lo hago para mi blog :)

    ResponderBorrar
    Respuestas
    1. Hola Ana! Gracias ♥ Espero te animes, este menú queda precioso en el blog! Ahi me cuentas :)

      Borrar
  2. Me ha gustado mucho. El quid es si lo consigo, que con estas cosas desespero. Tengo el blog algo soso y me gustaría un cambio per8o, como te digo, ya veremos...
    Un saludo y muchas gracias,

    ResponderBorrar
    Respuestas
    1. Hola Carmen, si lo intentas despacio y con ánimos de seguro lo consigues veras como tu blog cambia muchísimo con este menú! Ahi me cuentas!

      Borrar
  3. Qué fácil resulta explicado así de bien, me lo apunto para el próximo cambio que haga en el blog!
    Y por cierto, que bonito has dejado el tuyo!!
    Besos!

    ResponderBorrar
    Respuestas
    1. Hola Ana! trate la forma de explicarlo lo mas que pude y creo que lo logre jeje porque si se entiende jeje!! ♥ Muy bien, ahi me cuentas para ver el resultado final de seguro te quedará genial ♥

      Borrar
  4. Hola, tienes un blog súper interesante y práctico, me encanta a si que me quedo por aquí.
    Un saludo

    ResponderBorrar
  5. preciosa me encanta este lugar con tutoriales y cosas tan útiles, por acá me quedo!

    ResponderBorrar
  6. Muy bien explicado. Lo mad dificil hacer unos botones chulos!un beso

    ResponderBorrar
    Respuestas
    1. Hola Ana, huuy sii.. Tienes que estar inspirada jeje ...

      Borrar
  7. Qué interesante!
    (Yo es que estoy enamorada de tu blog!) Éste tuto me lo guardo para cuando esté un poquito más tranquila de trabajo porque me interesa ponerlo en práctica.
    ¡Muchas gracias por compartirlo!
    Un beso,

    Manuela.

    ResponderBorrar
    Respuestas
    1. Hola Manuela! Pues se ha sonrojado el blog jejeje! Que linda gracias! Claro, cuando tengas tiempo de hacerlo ya sabes cualquier duda me comentas :D

      Borrar
  8. Ejem...¡Hola! Me gusta tu blog, *-* y me pregunta es, ¿como le haces las imágenes o en que programa? Los ejemplos de menú, me parecen muy bonito y quisiera hacer imágenes así. :)

    Muchas gracias.

    ResponderBorrar
    Respuestas
    1. Hola Vanesa! Gracias ♥ Las imágenes se abren en ilustrator, puedes bajarte varias de aquí freepik.es

      Borrar
  9. ¡Muuuuuuchas gracias! Por todos los tutoriales que tienes, me han servido de mucho. :)

    ResponderBorrar
    Respuestas
    1. De nada, para mi es un gusto compartir lo que voy aprendiendo!

      Borrar
  10. Hola Wendy, nos estamos poniendo al día con los tuoriales!! :) IUPIIII!
    Ahora, pregunta (y quizás ya lo hayas explicado pero no lo vimos), qué representa el nombre del título? (No nos deja escribir el código, "Su HTML no es aceptable: Etiqueta no permitida: H2")
    Un beso grande!!
    Miriam y Vero.-

    ResponderBorrar
    Respuestas
    1. Hola, bueno el titulo del gadget en este tutorial no lo necesitamos porque si le escribes algo perderá el diseño el menú! y ese codigo es para que puedas guardar el gadget de imagen sin titulo ya que si lo intentas guardar *sin nombre no te deja guardar el gadget te dice que tienes que ponerle nombre!

      Borrar
    2. Ah, genial!! Gracias por el dato!! ;)

      Borrar
  11. Estoy aprendiendo mucho con tu blog. Necesitaría saber que dimensiones deben tener los botones para las pestañas. Los creo desde un ipad con canva. Muchas gracias por tu amabilidad

    ResponderBorrar
    Respuestas
    1. Hola, tiene que tener la medida del lateral de tu blog, no sabría decirte que medidas pero por ejemplo mi blog tiene de ancho 230px!

      Borrar
  12. Hola!! Y si queremos poner el menú horizontal arriba del blog es el mismo proceso? Muchas gracias

    ResponderBorrar
    Respuestas
    1. Hola! No, no es el mismo proceso, eso ya es con código! En la escuelita virutal vemos eso, si quieres te apuntas para recibir la clase!

      Borrar
  13. Hola linda! Tu tutorial me ha fascinado, eres buenísima en esto, de verdad. Solo tengo una duda, ¿como has hecho los iconos tan monos? como el dibujo de la paleta, del pastelito y así. Me ayudarías mucho si me explicarás, gracias!

    ResponderBorrar
    Respuestas
    1. Hoa Leah! Los iconos los consegui de esta página que es muy bonita freepik.es

      Borrar
  14. Hola! he seguido tus pasos y me ha salido a la primera...pero ... a mi gusto se quedan muy separadas al llevar cada una una imagen.. ¿hay alguna forma para que se queden más juntitas? gracias!

    ResponderBorrar
  15. Hola me Han gustado tanto tus tutoriales que empece con las etiquetas soy nueva en esto y bueno estoy tratando te dire que puse una etiqueta pero solo se ve como una foto no hace nada es asi como debe de ser???

    ResponderBorrar
    Respuestas
    1. Hola, bienvenida al blog! Me alegra que los tutoriales te sean útiles.
      Este es un menú con imágenes así que al darle clic a la imagen te debe de llevar a alguna dirección, eso lo colocamos en vinculo... En Donde dice vinculo debes de colocar una dirección web.

      Borrar
  16. Hola, que lindo blog! Hoy me estaba dando a la tarea de personalizar mi nuevo blog y tu tutorial me pareció muy practico pero fíjate que no me gusta que queden tan separadas las imágenes. ¿Sabes como hacerle para que las imágenes queden mas "pegadas" una con la otra?

    ResponderBorrar
  17. Hola, hola... Fijate que no puedo pegar el código acá no me deja... Voy a actualizar el tutorial explicando como juntar los gadgets de imágenes.

    ResponderBorrar
  18. Hola linda!
    tengo un problema :c
    Cuando inserto el código para que las fotos queden más cerca, no me lo acepta. O sea, dice que la plantilla está aceptada pero no hay ningún cambio. ¡Muero, necesito ayuda!

    ResponderBorrar
    Respuestas
    1. Hola, perdón por responder hasta ahora, anda de viaje, puedes intentar pegar el código directo en la plantilla, hasta arriba mas o menos por donde este el código de los post, a mi me ha funcionado asi cuando el css no me da ningun cambio.

      Borrar
  19. Hola Wendy. Ante todo déjame felicitarte por tanta creatividad. Estoy tratando de colocar como fondo en el menú de mi blog en construcción, imágenes que simulan un "brochazo" de pintura y sobre ella se escribe. No he podido encontrarlas, ¿podrás ayudarme, por favor?. Mil y mil gracias.

    ResponderBorrar
    Respuestas
    1. Hola, hola ... Mira puedes buscar en Pinterest "watercolor brush" No sé si manejas illustrator o photoshop ahi consigues pinceles y puedes hacer las imágenes que necesites.

      Borrar
  20. Muchas gracias por este post, me ha resultado de mucha ayuda ^^. Saludos

    ResponderBorrar
  21. Hola!
    Yo no se porque pero no me funciona! :( he intentado poner un numero mas grande para reducir mas el espacio, pero no funciona

    ResponderBorrar
  22. No se como habrá quedado pero muchas gracias por la ayuda. Me encanta tu blog. Besin

    ResponderBorrar

Gracias por tus comentarios