FOLLOW ME!

SOCIAL NETWORK

AFILIAME
Not A Single Song
Para más botones, haz clic aquí

Colocar un 'slide' en tu header {layouts}

27 feb 2013
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

<img src="URL de tu head" width="1024" height="688" />
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:


Y bueno, eso serí todo. Si te queda alguna duda, deja un comentario y pregunta :)

6 comentarios :

  1. Graciassssssssssssssssssssss!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    ResponderEliminar
    Respuestas
    1. De nada!! Espero que se haya entendido bien, cualquier cosa decime :)

      Eliminar
  2. Tienes un premio en mi blog: http://curiosapramila.blogspot.com.es/2013/02/premios.html

    ResponderEliminar
  3. me encanto, pero no se puede poner uno asi pero DEBAJO DEL HEADER???, que corra por todo el blog a lo ancho?? :)
    otraaaaaaaa duda, a mi me queda con un pequeño margen arriba y abajo, por que puede ser cata??
    besote!

    ResponderEliminar
    Respuestas
    1. Sí, se puede... Debería hacer el código y te lo paso, dale?
      Lo del margen, me mostras qué es lo que te queda? Porque así, sin verlo, no puedo decirte por qué es :)

      Un beso!

      Eliminar
    2. ahora te mando la captura por twitterrrrrrrrr :)

      Eliminar