¡Hola personitas! Lo primero os recordaos que estoy de sorteo, por si aún no os habéis apuntado y queréis hacerlo. Podéis hacerlo en
esta entrada.
Y ahora ya vamos al lío. Hace unos días Ayla me preguntó cómo hacer un menú con imágenes (como el que tengo de blondas, aquí arriba) y por un momento pensé en pedirle el correo y explicárselo, pero luego pensé... Bueno, puedo hacer un tutorial, y así os podéis beneficiar otros también.
Además, justo me pilló en un momento en el que yo había decidido hacer cambios en el aspecto del blog (de este y del de Algodón). De hecho, con el de Algodón ya había empezado. Mirad el antes y el después.
¿Mas bonito, no! Y aún no he acabado. Podéis ver el blog
aquí.
Bueno, y aquí va el tutorial (vamos a crear un menú en el rincón de Algodón):
Primero, tenemos que decidir cuales son las secciones que va a tener nuestro menú, y crear unas imágenes para cada una de ellas). Podéis hacerlas cómo queráis, yo suelo utilizar power point (el dibujo de Algodón está hecho con power point).
Estas son las que he creado:
Es muy importante que todas las imágenes tengan el mismo tamaño en altura y anchura, para que quede una forma armoniosa.
Entonces, vamos a ello, una vez que tengáis preparadas las imágenes (si las guardáis en formato .png, conservará las transparencias), abrid una entrada nueva, y las subís todas. Ponedlas en tamaño pequeño (aunque luego las cambiaremos de tamaño, en función de cómo de grandes o peques las queramos).
Podéis enlazar los botones a muchas cosas, ya sean páginas del blog, etiquetas, o incluso páginas externas (facebook, bloglovin, youtube...)
Os voy a explicar cómo sacar los enlaces de las páginas y etiquetas, porque de las páginas externas suele ser sólo copiar el enlace.
Una vez copiados los enlaces, volved a poner "no mostrar" las páginas.
Para las que ya tenéis puesto el gadget de etiquetas en el blog, es muy fácil, sólo pulsando en una etiqueta en concreto, y copiando el enlace que aparece arriba, ya lo tenéis preparado. Las que no:
(también podéis coger los enlaces pinchando en las etiquetas que aparecen justo debajo de cada entrada).
Repetid con todas las imágenes la misma operación. ¡Ya estamos casi acabando, no desesperéis!
Una vez están todas las imágenes enlazadas, vamos a visión HTML, y copiamos todo lo que haya escrito.
Ahora nos vamos a diseño, y añadimos un el gadget HTML/javascript justo debajo de la cabecera del blog.
Guardamos, y vemos a ver que tal queda. En mi caso, hay que reducirlos un poco de tamaño, porque si no no caben en una linea recta.
Para disminuirlo volvemos a abrir el HTML/javascript y sustituimos valores en:
height= altura
width= anchura
(cambiamos los números, poniendo los mismos números en todas las imágenes)
Por ejemplo, mis imágenes eran de 77x200, y las he cambiado a 57x150 (lo mejor para esto es que vayáis variando los valores en la entrada donde habíais copiado las imágenes y pasando de HTML a Redactar, para ver cómo van quedando, y que no se os deforman las imágenes. Cuando os quepan las etiquetas en una sola línea es que está guay).
¡jijiji, y así quedó! ¡Por fin! ¿Os habéis enterado con mis explicaciones o habéis empezado a arrancaros los pelos!
Espero que os sirva de ayuda, y ya sabéis que si tenéis alguna duda, o algún problemilla, sólo tenéis que decírmelo y os echaré un cable.
¡Un besito personitas, y a ser muy felices!
