Hola chicas! Este es un tutorial que me pidieron por Ask y me pareció que estaba bueno hacerlo... es super sencillo, sólo hay que poner un código pequeño. El efecto lo puedes ver {aqui}, veremos como lograr esas imágenes en movimiento.
Nota: antes de hacer los cambios, guarda una copia de tu plantilla por si algo te sale mal!
1. Vamos a la pestaña Plantilla de nuestro blog y buscamos <body style ...
2. Borramos el código de nuestro header (este que marco aquí):
3. Lo reemplazamos por este otro:
<div style="text-align:center; width:1024px; margin-left:auto; margin-right:auto;"> <img src="URL de tu head" width="1024" height="688" />
<div style="position: absolute; top:225px; left: 325px; width: 410px; height: 250px;">
<marquee onmouseover="this.stop()" onmouseout="this.start()">
<img src="URL imagen 1" />
<img src="URL imagen 2" />
<img src="URL imagen 3" />
<img src="URL imagen 4" />
<img src="URL imagen 5" /></marquee></div>
Y queda reemplazar algunos valores (estan en rojo) aquí te explico que es cada uno.
- width y height ya los hemos visto muchas veces, son el ancho y la altura. Los primeros dos (1024px y 688px) son del header y los segundos que aparecen (410px y 250px) son los de las imagenes que estan en la marquesina.
- top y left es para modificar la ubicación de las imágenes. Tienes que ir aumentando o disminuyendo los valores hasta encontrar la posición exactada que deseas (los valores que estan puestos son obviamente los que a mi me quedaron para que las imágenes se vieran dentro de ese cuadrito que hice)
Además, tienes que (obviamente) modificar los links de tu header y de las imágenes. Si quieres agregar más imágenes lo único que tienes que hacer es agregar más <img src="URL imagen" /> cuantas veces quieras.
Obviamente que tu header puede llevar image-map sólo tienes que reemplazar el
por el código de tu header con el image-map ya hecho. Pero, ¡ojo! tienes que copiarlo desde <img... hasta </map> es decir, sin la etiqueta <div style... y el </div> final aquí te marco:<img src="URL de tu head" width="1024" height="688" />
Y bueno, eso serí todo. Si te queda alguna duda, deja un comentario y pregunta :)
Graciassssssssssssssssssssss!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
ResponderEliminarDe nada!! Espero que se haya entendido bien, cualquier cosa decime :)
EliminarTienes un premio en mi blog: http://curiosapramila.blogspot.com.es/2013/02/premios.html
ResponderEliminarme encanto, pero no se puede poner uno asi pero DEBAJO DEL HEADER???, que corra por todo el blog a lo ancho?? :)
ResponderEliminarotraaaaaaaa duda, a mi me queda con un pequeño margen arriba y abajo, por que puede ser cata??
besote!
Sí, se puede... Debería hacer el código y te lo paso, dale?
EliminarLo del margen, me mostras qué es lo que te queda? Porque así, sin verlo, no puedo decirte por qué es :)
Un beso!
ahora te mando la captura por twitterrrrrrrrr :)
Eliminar