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 ♥
 |
 |
 |
A C T U A L I Z A C I O N 06/04/2015
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
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!
40 comentarios
Muy chulo! Un buen tutorial y los ejemplos muy bonitos. Si me animo lo hago para mi blog :)
ResponderBorrarHola Ana! Gracias ♥ Espero te animes, este menú queda precioso en el blog! Ahi me cuentas :)
BorrarMe 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...
ResponderBorrarUn saludo y muchas gracias,
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!
BorrarQué fácil resulta explicado así de bien, me lo apunto para el próximo cambio que haga en el blog!
ResponderBorrarY por cierto, que bonito has dejado el tuyo!!
Besos!
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 ♥
BorrarHola, tienes un blog súper interesante y práctico, me encanta a si que me quedo por aquí.
ResponderBorrarUn saludo
Hola Ana! Bienvenida ♥ !!
Borrarpreciosa me encanta este lugar con tutoriales y cosas tan útiles, por acá me quedo!
ResponderBorrarHola Wendo! Bienvenida ♥ Gracias por quedarte!
BorrarMuy bien explicado. Lo mad dificil hacer unos botones chulos!un beso
ResponderBorrarHola Ana, huuy sii.. Tienes que estar inspirada jeje ...
BorrarQué interesante!
ResponderBorrar(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.
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
BorrarEjem...¡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í. :)
ResponderBorrarMuchas gracias.
Hola Vanesa! Gracias ♥ Las imágenes se abren en ilustrator, puedes bajarte varias de aquí freepik.es
Borrar¡Muuuuuuchas gracias! Por todos los tutoriales que tienes, me han servido de mucho. :)
ResponderBorrarDe nada, para mi es un gusto compartir lo que voy aprendiendo!
BorrarHola Wendy, nos estamos poniendo al día con los tuoriales!! :) IUPIIII!
ResponderBorrarAhora, 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.-
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!
BorrarAh, genial!! Gracias por el dato!! ;)
BorrarEstoy 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
ResponderBorrarHola, 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!
BorrarHola!! Y si queremos poner el menú horizontal arriba del blog es el mismo proceso? Muchas gracias
ResponderBorrarHola! 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!
BorrarHola 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!
ResponderBorrarHoa Leah! Los iconos los consegui de esta página que es muy bonita freepik.es
BorrarHola! 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!
ResponderBorrarHola, te he respondido por mensaje en fan page
BorrarHola 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???
ResponderBorrarHola, bienvenida al blog! Me alegra que los tutoriales te sean útiles.
BorrarEste 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.
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?
ResponderBorrarHola, 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.
ResponderBorrarHola linda!
ResponderBorrartengo 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!
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.
BorrarHola 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.
ResponderBorrarHola, 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.
BorrarMuchas gracias por este post, me ha resultado de mucha ayuda ^^. Saludos
ResponderBorrarHola!
ResponderBorrarYo no se porque pero no me funciona! :( he intentado poner un numero mas grande para reducir mas el espacio, pero no funciona
No se como habrá quedado pero muchas gracias por la ayuda. Me encanta tu blog. Besin
ResponderBorrarGracias por tus comentarios