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.