jueves, 8 de noviembre de 2018

¿Cómo hacer un menú de colores para tu blog? | Diseño



Hello ladies!
Poco a poco, verán que éste blog sigue un patrón, patrón que espero, a todos les guste ♥ pero, luego de varias semanas se notará, no ahora.

Hoy veremos un tutorial para hacer un lindo menú.
Si van a mi blog principal, a la publicación de éste post está allí un menú de colores:

Les juro, que es lo más fácil del mundo. Podría ponerlos a descargar imagenes y confundirlos con el html ydecirles que pongan esto aquí, pongan esto allá, esto se modifica, etc etc, pero soy fan de las cosas simples de la vida.
Para este menú no vas a utilizar html, solo te daré un codigo chiquito para modificar algo al final.

Entonces, ésto se hace con photoshop, o paint, tu dirás cuál programa te gusta más. En Paint, es un poquitín más trabajoso pero pues, el resultado es el mismo al final.

Veamos como se hace con Photoshop, verán, lo que diseñaremos allí, son las imagenes del menú: Lo que dice "Libros, Octubre, Figure Skating, y de más"

Para eso, primero debemos ver el ancho de tu barra lateral. 
Vas a blogger ► Diseño ► Agregar gadget ► imagen
Allí dice los pixeles a los que se va a ajustar tu imagen. En mi caso dice "250".

Vamos a photoshop
File ► new ► (eliges las medidas, 250 x (lo que tu quieras)).

Elegí, 250 x 75.

Ahora, pintamos de un color sólido lo que tenemos. Puedes buscar en ésta página algún color que te guste.

vas al bote de pintura y lo pintas. Yo elegí un color rosa (ffb6da) y quedó así:


Ahora, vámos a escribir un título en él.
Yo escribire "Figure Skating" y elegiré la fuente Tahu!

Creamos una nueva capa
Layer ► New ► Layer


Elegimos la fuente y escribimos una de las categorías del menú eligiendo un color contraste:


Lo guardamos como PNG y ya ♥
Solo debemos hacer una imagen para cada categoría.
El punto es que cambies el color del fondo.
Para cambiarlo, das click en la capa del fondo y así puedes ir de nuevo al bote de pintura y elegir otro color.

Antes /Después


Ahora que ya tenemos todas las imagenes con las categorías que quieras en tu blog, vámos a armarlo en él:

Si tienes el gadget de las etiquetas, te servirá para saber el link directo de las etiquetas/categorías de tu blog:


El gadget de las etiquetas será muy útil. Si tienes más que yo, elige la opción de las etiquetas seleccionadas para que solamente te muestre las categorías que hiciste para el menú.
El gadget únicamente lo usaremos para conocer los links de las categorías.
Ya que seleccionaste las etiquetas que querías, comenzaremos a armas el blog agregando las imagenes que hiciste, como gadget de imagen.


► El título lo dejas en blanco. 
► La leyenda también.
► En vinculo, vas al gadget de las etiquetas desde la página de tu blog. Das botón derecho "copiar dirección de enlace" y la pegas allí donde dice Vinculo.
► Ahora, desde tu pc seleccionas la imagen que concuerda con el link de la categoría.
► Seleccionas "reducir hasta ajustar" para que no haya problemas.
► Guardar

De esa misma forma, subes todas las imagenes.
Puedes moverlas y acomodarlas en el orden que quieras.


Ahora, depende de como haya quedado el menú, seguramente las imagenes están muy separadas unas con otras. Para eso es el código que vámos a usar ♥
El siguiente código va a reducir el espacio entre una imagen y otra.

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

}

Este código lo vámos a usar en:
Tema ► Perzonalizar ► Opciones avanzadas ► Agregar CCS allí copiamos el codigo y editamos ↓

#Image2 es el número de imagen que vamos a usar.
¿Cómo saber qué número de imagen es la imágen que subiste? Facil, allí mismo en diseño, colocas el puntero del ratón en donde dice: "Editar" y abajo saldrá el número que es.

Copiamos el mismo código y lo pegamos debajo del primero y solo editamos el numero de la imagen.
Además en 40px puedes editar el numero 40 por otro si los quieres mas separados o más juntos.
Entre mas pequeño el numero, más juntos, debende de las iamgenes que hayas echo y tu blog pero lo verás al momento el cambio mientras cambias el valor.

Cuando termines de agregar los codigos en el CSS y estés contenta con el resultado, habrás terminado. ♥

Como ven, este codigo tiene un blog mas o menos igual, solo que el fondo es una imagen, pero la preparación y el modo de armarlo es el mismo.


Cualquier duda, adelante chicas ♥

Baii ♥

No hay comentarios.:

Publicar un comentario

Related Posts Plugin for WordPress, Blogger...