Cómo hacer un menú con imágenes

16.4.15

Hola, hola! 
Que tal va la semana? Muy rápido verdad?
Yo sigo medio desaparecida ya que ahora ando metiendo acelerador en varios cositas para avanzar poco a poco en lo que estoy trabajo y es que siento que no avanzo nada y hago mucho pfff.. Pero bueno ni modo, lento pero seguro.
En este día les traigo un tutorial muy útil a la hora de hacer un menú con imágenes, varias me preguntaron como hice el indice de todos mis posts asi que les explico paso a paso para tener un menú muy bonito♥

Lo que vamos a necesitar:

1. Código → VER CÓDIGO AQUÍ
2. Imágenes bonitas (Todas las imágenes deben de tener el mismo tamaño)
2. URL de cada imagen
3. URL de la página que deseamos que nos lleve al hacerle clic en cada  imagen

1. El código: Luego de descargar el código deben de copiarlo y pegarlo en un documento de word para que sea más fácil editarlo.
Los datos que están de color debemos de cambiar:
- Dirección web
- Nombre
- URL de la imagen
- Texto 
- Texto

(Esta es una parte del código) 
<td><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="DIRECCION WEB" style="margin-left: auto; margin-right: auto;" target="_blank"><img alt="Nombre" border="0" src="URL DE LA IMAGEN" width="220" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">♥ TEXTO♥ <br />
- ♦ TEXTO♦ -</td></tr>
</tbody></table>

</td>


Luego de cambiar los datos en todo el código, vamos a nuestro editor de blogger y en la vista HTML pegamos el código. 


 El código consta de poner tres imágenes en cuadros del mismo tamaño en linea recta, si pegan el código tal cual como esta en la hoja sin cambiar los datos  este es el resultado pero recuerden que debemos de  regresar a → redactar para ir viendo como va quedando


Luego de cambiar todos los datos así debe de quedar nuestro post en vista → redactar



y listo! Es un poco trabajoso estar reemplazando los datos del código pero el resultado es muy, muy bonito.
NOTA: El código solo coloca tres imágenes, si vamos a utilizar varias imagenes debemos de copiar y pegar el código las veces necesarias

Que les parece este menú? lo van a colocar en su blog?


Nos vemos al próximo post , un abrazo♥

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

11 comentarios

  1. Respuestas
    1. De nada Diana, espero te sea útil.. bonito día

      Eliminar
  2. Me encanta, así que me llevaré el código para aplicarlo, pues me parece de lo más útil. Para menús sin "desplegables", se podría hacer con Google Map Tools, ¿verdad? Yo lo he aplicado varias veces en mi sitio, aunque le veo algunas pegas, claro...
    Un besazo.

    ResponderEliminar
    Respuestas
    1. Hola Rebeca no se muy bien a que te refieres pero yo no he usado Google Map Tools seria de ver.. Lo que si he usado es una página para hacer mapa de imágenes, pero bueno. Con este tutorial solo necesitas cambiar los datos del código y listo ♥

      Eliminar
  3. Hola. queda muy bonito estéticamente el menú con imágenes... tomo nota de tus indicaciones. Seguimos en contacto

    ResponderEliminar
    Respuestas
    1. Si queda muy bonito anque es algo largo estar cambiando los datos si haces un menú grande vale la pena :)

      Eliminar
  4. ¡Eres la mejor Wendy!
    Cuando lo explicas parece taaaan fácil y luego una se vuelve medio loca sola frente a la pantalla, pero merece muuucho la pena.
    Voy a intentar hacerlo... veremos a ver qué me sale!! jajajaja
    Mucho ánimo en tu nuevo proyecto. Estoy segura que lo vas a triunfar.
    Un beso!!

    ResponderEliminar
    Respuestas
    1. Gracias Manuela! De seguro va a quedar precioso con tanta cosa bonita que haces y un menú seria genial para mostrar tu trabajo :)
      Gracias por los ánimos ♥ espero tener todo listo a fin de año

      Eliminar
  5. Hola,ya te sigo ,me encanta tu blog,tomare nota ya que soy novata en esto.TE dejo el mio http://clubtesters.blogspot.com.es/ .Besitos.

    ResponderEliminar
  6. Me lo pongo en pedientes para hacer cuando tenga un ratito libre jajaja...

    Me encanta... Muchas gracias, Wendy.

    ¡Un muackiles!

    ResponderEliminar

Gracias por tus comentarios

16.4.15

Cómo hacer un menú con imágenes

Hola, hola! 
Que tal va la semana? Muy rápido verdad?
Yo sigo medio desaparecida ya que ahora ando metiendo acelerador en varios cositas para avanzar poco a poco en lo que estoy trabajo y es que siento que no avanzo nada y hago mucho pfff.. Pero bueno ni modo, lento pero seguro.
En este día les traigo un tutorial muy útil a la hora de hacer un menú con imágenes, varias me preguntaron como hice el indice de todos mis posts asi que les explico paso a paso para tener un menú muy bonito♥

Lo que vamos a necesitar:

1. Código → VER CÓDIGO AQUÍ
2. Imágenes bonitas (Todas las imágenes deben de tener el mismo tamaño)
2. URL de cada imagen
3. URL de la página que deseamos que nos lleve al hacerle clic en cada  imagen

1. El código: Luego de descargar el código deben de copiarlo y pegarlo en un documento de word para que sea más fácil editarlo.
Los datos que están de color debemos de cambiar:
- Dirección web
- Nombre
- URL de la imagen
- Texto 
- Texto

(Esta es una parte del código) 
<td><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="DIRECCION WEB" style="margin-left: auto; margin-right: auto;" target="_blank"><img alt="Nombre" border="0" src="URL DE LA IMAGEN" width="220" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">♥ TEXTO♥ <br />
- ♦ TEXTO♦ -</td></tr>
</tbody></table>

</td>


Luego de cambiar los datos en todo el código, vamos a nuestro editor de blogger y en la vista HTML pegamos el código. 


 El código consta de poner tres imágenes en cuadros del mismo tamaño en linea recta, si pegan el código tal cual como esta en la hoja sin cambiar los datos  este es el resultado pero recuerden que debemos de  regresar a → redactar para ir viendo como va quedando


Luego de cambiar todos los datos así debe de quedar nuestro post en vista → redactar



y listo! Es un poco trabajoso estar reemplazando los datos del código pero el resultado es muy, muy bonito.
NOTA: El código solo coloca tres imágenes, si vamos a utilizar varias imagenes debemos de copiar y pegar el código las veces necesarias

Que les parece este menú? lo van a colocar en su blog?


Nos vemos al próximo post , un abrazo♥

Share to Facebook Share to Pinterest

11 comentarios:

  1. Respuestas
    1. De nada Diana, espero te sea útil.. bonito día

      Eliminar
  2. Me encanta, así que me llevaré el código para aplicarlo, pues me parece de lo más útil. Para menús sin "desplegables", se podría hacer con Google Map Tools, ¿verdad? Yo lo he aplicado varias veces en mi sitio, aunque le veo algunas pegas, claro...
    Un besazo.

    ResponderEliminar
    Respuestas
    1. Hola Rebeca no se muy bien a que te refieres pero yo no he usado Google Map Tools seria de ver.. Lo que si he usado es una página para hacer mapa de imágenes, pero bueno. Con este tutorial solo necesitas cambiar los datos del código y listo ♥

      Eliminar
  3. Hola. queda muy bonito estéticamente el menú con imágenes... tomo nota de tus indicaciones. Seguimos en contacto

    ResponderEliminar
    Respuestas
    1. Si queda muy bonito anque es algo largo estar cambiando los datos si haces un menú grande vale la pena :)

      Eliminar
  4. ¡Eres la mejor Wendy!
    Cuando lo explicas parece taaaan fácil y luego una se vuelve medio loca sola frente a la pantalla, pero merece muuucho la pena.
    Voy a intentar hacerlo... veremos a ver qué me sale!! jajajaja
    Mucho ánimo en tu nuevo proyecto. Estoy segura que lo vas a triunfar.
    Un beso!!

    ResponderEliminar
    Respuestas
    1. Gracias Manuela! De seguro va a quedar precioso con tanta cosa bonita que haces y un menú seria genial para mostrar tu trabajo :)
      Gracias por los ánimos ♥ espero tener todo listo a fin de año

      Eliminar
  5. Hola,ya te sigo ,me encanta tu blog,tomare nota ya que soy novata en esto.TE dejo el mio http://clubtesters.blogspot.com.es/ .Besitos.

    ResponderEliminar
  6. Me lo pongo en pedientes para hacer cuando tenga un ratito libre jajaja...

    Me encanta... Muchas gracias, Wendy.

    ¡Un muackiles!

    ResponderEliminar

Gracias por tus comentarios