Tutoriales: Menú de etiquetas en imágenes con efecto opacidad

Por la @EVDani desde Chile 

Hola chicas, hoy comenzamos con las asesorías para sus blogs, de forma gratuita por el mes de marzo. Una de las primeras blogger que nos escribió, fue Cintia Medina desde Argentina. Ella quería colocar en su blog, Yo amo mis uñas, un menú de etiquetas en imágenes y que estas, tuviesen un efecto de opacidad.


A continuación daré respuesta a su pregunta...

Cintia, lo primero que tienes que hacer es organizar tus entradas, con esto me refiero a definir qué etiquetas van a caracterizar cada uno de tus posts, en tu caso, son estilos de diseños de uñas, colores o efectos, entre otras que tu sabes mejor que yo.

El segundo paso consiste en colocar las etiquetas en las entradas publicadas (o por publicar) en tu blog. Te daré un ejemplo. Si tu entrada habla de un tutorial de uñas con diseño animal print cebra, entonces deberías colocar en esa entrada, las etiquetas que ya definiste y que apliquen a ese post, en este caso podrían ser nail art, blanco, negro, tutorial.

Luego de eso, te vas a dar cuenta que debajo de cada una de tus entradas aparecerán las etiquetas que tu colocaste para cada una de esas entradas. Cuando le das clic a alguna, se abrirá una página nueva con todas las entradas que tienen esa etiqueta y, la url de esa etiqueta (por ejemplo tutoriales) será algo como lo siguiente:



Cuando ya tengas noción de todo lo que te estoy contando, estás lista para crear un menú de imágenes para las etiquetas de tu blog. 

Creando el menú de etiquetas

Antes que nada debes hospedar las imágenes que vas a utilizar en algún sitio como Picassa o Tinypic. También puedes usar una misma entrada de tu blog para hospedarlas, subiendo  y publicando todas las imágenes en una entrada.

Ahora procederás a crear tu menú de imágenes con el efecto opacidad, para todas tus etiquetas o las que desees.

Para eso tendrás que copiar y pegar un código en un gadget de blogger. En la parte de diseño de tu panel de blogger podrás agregar un gadget de html y ahí pegarás el siguiente código de menú:

<a href="URL DE LA ETIQUETA 1"><img href="etiqueta" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity='40';" onmouseover="this.style.opacity=1;this.filters.alpha.opacity='100';" src="URL DE LA IMAGEN 1" style="opacity: 0.5;" /></a>
<a href="URL DE LA ETIQUETA 2"><img href="etiqueta" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity='40';" onmouseover="this.style.opacity=1;this.filters.alpha.opacity='100';" src="URL DE LA IMAGEN 2" style="opacity: 0.5;" /></a>
<a href="URL DE LA ETIQUETA 3"><img href="etiqueta" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity='40';" onmouseover="this.style.opacity=1;this.filters.alpha.opacity='100';" src="URL DE LA IMAGEN 3" style="opacity: 0.5;" /></a>

En la parte que dice URL DE LA ETIQUETA, coloca la url de la etiqueta, la puedes copiar pasando el mouse sobre el enlace de la etiqueta, sale abajo de las entradas que tengan esa etiqueta, apretando el botón derecho del mouse, seleccionas copiar url de la dirección y listo.

En la parte que dice URL DE LA IMAGEN, coloca la url de la imagen hospedada, la puedes copiar colocando el mouse sobre la imagen (o donde se encuentre) y apretando el botón derecho seleccionas "copiar url de la imagen".
Si deseas agregar otra imagen a tu menú, solo tienes que agregar un nuevo código, así cuantas veces sea necesario.

Si deseas que el menú quede centrado, tienes que colocar al principio y al final de todo el código <center> y <center/> respectivamente, como se muestra a continuación.

<center>
CUERPO DEL CÓDIGO
<center/>



Para terminar, le das guardar al gadget de HTML en tu blog y el menú estará listo, cada imagen se vera y tendrá el siguiente efecto.




Espero que quede bello tu menú y que te haya podido ayudar :)






CONVERSATION

6 ya son Blogger@s:

  1. Muchisimas gracias por este post !!!
    Ya mismo me pongo a hacerlo :)

    ResponderEliminar
  2. que interesante!!! Me encanta recibir tus actualizaciones!!!!
    Un abrazo,
    Isabel
    http://dmodaydtendencia.blogspot.com/

    ResponderEliminar
  3. que eres tooooop LMM!!!!!!! seca

    ResponderEliminar
  4. Que bueno que les gusto el tutorial :)

    ResponderEliminar
  5. Hola, he estado tratanto de seguir paso a paso tu tutorial pero me dice error al momento de añadir el gadget :/ no sé si lo este haciendo mal en el momento de poner el URL de la imagen.

    ResponderEliminar
  6. Y disculpa, no hay una forma de que no sea opaco?

    ResponderEliminar

Todo comentario que no tenga relación con el post o sobrepase los límites de la libre expresión, será moderado y no saldrá publicado.

Back
to top