Marquesina con banners para tu blog


Anteriormente ya expliqué cómo poner textos en movimiento (marquesinas) y cómo crear banners en nuestro blog. Ahora vamos a hacer una mezcla y os voy a explicar cómo poner banners con una marquesina.




Para ello vamos a:
1) Diseño
2) Elementos de página
3) Añadir un gadget
4) HTML/Javascript y en él pegamos el siguiente código:


Código a copiar/pegar<marquee direction="down" style="text-align: center; width:200px;height:150px;border:1px solid #ccc;padding:3px" onmouseover="this.scrollAmount='0'" scrollamount="1" onmouseout="this.scrollAmount='2'">

<a href="URLenlace1"><img src="URLimagen1"/></a>

<br/>

<a href="URLenlace2"><img src="URLimagen2"/></a>

<br/>

<a href="URLenlace3"><img src="URLimagen3"/></a>

</marquee>



Modificaciones que puedes hacer:

<marquee direction="down"> -> down (abajo) puedes cambiarlo por up (arriba), left (izquierda) y right (derecha). Con esto conseguimos que el banner-marquesina aparezca desde otro lado.

width:200px;height:150px -> width es el ancho y height es el alto. Cambia los valores a tu gusto para que puedan caber en tu sidebar.

border:1px solid #ccc; -> Ya expliqué todo sobre los bordes en blogger anteriormente. Revisa la lección para modificarlo a tu gusto.

scrollamount="1"  -> Esta es la velocidad a la que se van a mover los banners. Cuanto más alto sea el valor, más rápido irá el banner.




Modificaciones que debes hacer:

"URLenlace1" -> Aquí debes poner el enlace al que quieres que se acceda una vez se haya clicado sobre el banner.

"URLimagen1" -> Enlace de la imagen. Debes haberla subido primero a algún servidor gratuito, o al tuyo de pago.




Para añadir más banners fíjate en la estructura del banner. Después de <a href="URLenlace3"><img alt="Titulo" src="URLimagen3"/></a> deberías poner:

<br/>
<a href="URLenlace4"><img alt="Titulo" src="URLimagen4"/></a>

13 comentarios:

  1. MUCHAS GRACIAS X TANTAS IDEAS, TRUCOS Y CONSEJOS.
    TE DEDIQUE UNA ENTRADA.
    ES MUY BUENO TU BLOG.

    ResponderEliminar
  2. Hola Marian y Pablo. ¿Todo bien con vuestro bebé¿ Muchísimas gracias por vuestro comentario y por dedicarme una entrada, de corazón, gracias. Un saludo.

    ResponderEliminar
  3. Muy Muy buen trucooo!!!
    Graciaas...
    (ya queda menos) XD

    ResponderEliminar
  4. Gracias a ti Nestor. Me alegro que te guste, un saludo.

    ResponderEliminar
  5. Oh! Oh! Gracias!!! Tenía en mente preguntarte cómo hacerlo. Me lees el pensamiento, jajaja. Ahora sólo me falta encontrar las imágenes y hacerlo ^^

    ResponderEliminar
  6. jajaja. ¿Has visto? ¡Estoy hecho un brujo! jajaja. Gracias por tu comentario amiga Lipooh. Un saludo :)

    ResponderEliminar
  7. Muxas grax por este tuto... lo he empleado en mis blogs, en uno de ellos para mas de una utilidad, poniendo por ejemplo el nombre de las paginas, cambiando la dirección de movimiento y demás... y la verdad es que da un aspecto de los mas profesional, eres el mejor...
    pasate y confere... saludos...

    http://tedoymialma.blogspot.com
    http://deseoyoscuridad.blogspot.com

    ResponderEliminar
  8. Felicidades por el blog. He estado probando, pero SIEMPRE desliza las imágenes hacia abajo, y además me salen las 3 imágenes a la vez. ¿Cómo se puede hacer para que vayan pasando hacia la derecha o izquierda, y NO PARA ABAJO?

    Gracias de antemano

    ResponderEliminar
  9. Tus explicaciones son verdaderamente excelentes; gracias, me has ayudado un montón.

    ResponderEliminar
  10. Hola!! Me funciona perfectamente viendolo desde mozilla pero entro desde el internet explorer y solo me sale medio rectangulo negro :S sabes que puede ser?

    ResponderEliminar
  11. me encantó todo lo de las marquesinas, lo andaba buscando y bien explicado :) gracias. solo una pregunta de casualidad sabes que poner para que al momento de hacer clik en el banner, no se reemplase la ventana por el nuevo link, si no que se aparesca en una nueva ventana o pestaña?

    ResponderEliminar
  12. Muchas gracias, esto era precisamente lo que andaba buscando.
    Saludos!

    ResponderEliminar