Crear un banner para blog de blogger


Hace unos días recibí un correo en el formulario de contacto de parte de webcristianoronaldo en el que me pedía cómo crear un banner de publicidad. A parte de destinar este banner a publicidad, también podremos poner en él las fotos que queramos, de nuestras entradas o de página amigas, y que éstas vayan cambiando solas.


Comencemos:

1) Vamos a Diseño
2) Edición de HTML
3) Buscamos </head> (tecleamos Ctrl + F para buscar más rápido).
4) Antes de </head> pegamos el siguiente código:


<script src='http://dl.getdropbox.com/u/647003/CiudadBlogger/Scripts/xfade2.js' type='text/javascript'/>



5) Buscamos en nuestra plantilla ]]></b:skin>
6) Antes de ]]></b:skin> pegamos el siguiente código:



/* rotator
----------------------------------------------- */
{
margin: 0;
padding: 0;
}
#rotator {
border: 1px solid #000000;
overflow: hidden;
margin: 0px ;
padding:2px;
position: relative;
width: 430px;
height: 60px;
}
#rotator img {
border: 0;
width: 430px;
height: 60px;
}



Para cambiar las dimensiones del banner, deberemos modificar width (largo) y height (ancho) por los valores que queramos.


7) Ahora sólo nos queda ir a Diseño -> Elementos de página y añadir un gadget en la zona de la plantilla que queramos. Añadiremos un gadget HTML/Javascript y en él copiaremos el siguiente código:



<div id="rotator">
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
</div>




Sólo nos queda cambiar URL del enlace por el enlace al que queramos que se acceda cuando se clica en el banner.

En título podemos añadir el nombre de la web al que se accederá o una breve descripción del sitio.

En URL de la imagen añadiremos el enlace de la imagen que representará la puerta de enlace con la página que se va a acceder.



¡Todo listo!


Muchas gracias a ciudadblogger y a informatica-práctica.

24 comentarios:

  1. muy buena la explicacion, pero... tienes algun ejemplo? quisiera verlo terminado.

    gracias!!!! estoy suscripta a sus novedades y me gusta todo lo q publican

    ResponderEliminar
  2. Hola Viviana y Sofia. Me alegro volverte a ver por aquí. A ver si hoy creo uno de ejemplo y lo añado a la entrada.

    Gracias por volver y sobre todo gracias por suscribirte.

    ResponderEliminar
  3. Pues no tengo ejemplo de momento, me sabe mal. Pero puedes encontrar uno abajo del todo en cyberbloggero.com

    ResponderEliminar
  4. hola he intentado mseguir estos pasos, pero al final me ppierdo, es decir, cuando creamos el gadget. la url... la imagen la tengo en el pc... como pongo la url?

    ResponderEliminar
  5. Hola Carles. La imagen debe estar alojada en un servidor de internet, si está en tu PC tienes que subirla por ejemplo a http://www.imageshack.us

    En esa web clicas en "Browse", seleccionas dónde esté tu imagen y luego clicas en "start upload". Se subirá, copias la URL y ya la tienes.

    Un saludo y bienvenido.

    ResponderEliminar
  6. Quiero saber si puedo crear correo electrónico nuevo que no sea de hotmail o yahoo.

    Gracias,

    Marina Rojas

    ResponderEliminar
  7. Hola Marina, te aconsejo que te crees uno de gmail aqui: www.Google.com/Gmail

    Un saludo.

    ResponderEliminar
  8. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  9. Comentario número 9 borrador por el administrador.

    Motivo: SPAM (ver norma 5).

    Gracias por tu comprensión.

    ResponderEliminar
  10. Hola amigos les quiero recomendar una pagina donde encontraran Banners, texto, Botones y menus de flash excelentes para los blogs. Espero lo disfruten y sea provechoso.

    http://www.flashvortex.com/

    ResponderEliminar
  11. Disculpa como puedo crear un banner que otros bloggers peguen para enlazar mi blosg..como el que tu tienes alli donde dice...¿QUIERES ENLAZARME?

    Gracias....


    te dejo mi correo si me puedes ayudar: ixoyemetal@gmail.com

    ResponderEliminar
  12. Hola Ixoye. Por favor revisa las normas a la hora de comentar. Aquí tienes la respuesta a crear un banner para que otros bloggers peguen para enlazar tu blog: http://www.quierocrearunblog.com/2009/09/crear-un-icono-para-enlazar-blog-de.html

    ResponderEliminar
  13. amigo yo crei que la animacion se veia en el blog simplemente lo lleva a la pagina donde esta para verla

    ResponderEliminar
  14. hola , tengo un problema con la creacion del banner ya que cuando pongo el anuncio no sale la imagen en el banner..
    como puedo hacer_ o quiero saber si solo se puede crear el banner sin la imagen

    muchas gracias

    ResponderEliminar
  15. Estupendo!! Muchas gracias por la Nota!

    ResponderEliminar
  16. NO ME SALIO BIEN EL BANNER
    http://ganarconmercadolibre.blogspot.com/

    ResponderEliminar
  17. como puedo insertar el script que tienes en Dropbox, para no tener que llamarlo desde mi blog a tu drop cada vez que entren???

    Thanks!!!

    ResponderEliminar
  18. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  19. Excelente tuto!! Me Sirvió muchísimo :)

    ResponderEliminar
  20. Como puedo hacer para que las fotos se muevan mas rapido?

    ResponderEliminar
  21. Hola, espero estes activo...quisiera saber si me pudes ayudar con un problema, no pùedo insertar un banner en blogger, he podido insertar otros gadgtes utilizando codigos html, pero no banners, agradeceria mucho su ayuda, saludos

    ResponderEliminar