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)
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♥
11 comentarios
Hermoso resultado, mil gracias!!!
ResponderBorrarDe nada Diana, espero te sea útil.. bonito día
BorrarMe 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...
ResponderBorrarUn besazo.
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 ♥
BorrarHola. queda muy bonito estéticamente el menú con imágenes... tomo nota de tus indicaciones. Seguimos en contacto
ResponderBorrarSi queda muy bonito anque es algo largo estar cambiando los datos si haces un menú grande vale la pena :)
Borrar¡Eres la mejor Wendy!
ResponderBorrarCuando 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!!
Gracias Manuela! De seguro va a quedar precioso con tanta cosa bonita que haces y un menú seria genial para mostrar tu trabajo :)
BorrarGracias por los ánimos ♥ espero tener todo listo a fin de año
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.
ResponderBorrarHermoso resultado, me encantooo :D
ResponderBorrarMe lo pongo en pedientes para hacer cuando tenga un ratito libre jajaja...
ResponderBorrarMe encanta... Muchas gracias, Wendy.
¡Un muackiles!
Gracias por tus comentarios