miércoles, 22 de julio de 2009

Cómo cambiar automáticamente el encabezado de Blogger

Tal vez se hayan dado cuenta de que la imagen de fondo del encabezado de esta página cambia automáticamente cada que se vuelve a cargar. Si tienen la duda de cómo se hace, en realidad no es complicado.

Simplemente abre la sección de diseño de tu blog y agrega un nuevo gadget de tipo HTML/javascript. Deja el título en blanco y pega este código:

<script type="text/javascript">
 var banner= new Array()
  banner[0]="http://domain.com/image1.png"
  banner[1]="http://domain.com/image2.png"
  banner[2]="http://domain.com/image3.png"
  banner[3]="http://domain.com/image4.png"
  banner[4]="http://domain.com/image5.png"
  banner[5]="http://domain.com/image6.png"
  banner[6]="http://domain.com/image7.png"
  banner[7]="http://domain.com/image8.png"
  banner[8]="http://domain.com/image.png"
 var random=Math.floor(9*Math.random());
 document.write("<style>");
 document.write("#header-wrapper {");
 document.write(' background:url("' + banner[random] + '") no-repeat 0px 0px;');
 document.write(" }");
 document.write("</style>");
</script>


Después de pegarlo, edítalo. Cada elemento de la lista (banner[]) debe tener la dirección completa de una de las imágenes que deseas alternar. No necesitas saber mucho de programación para darte cuenta de que los números en rojo son consecutivos. Así que si tienes nada más 5 imágenes que quieres alternar, el último elemento de la lista será banner[4] y la función será Math.floor(5*Math.random()). Si tienes más imágenes, agrega las líneas correspondientes respetando este principio.

Una vez ajustado el código, guarda el gadget y ¡listo! Ahora tienes un banner que cambia automáticamente cada que abres la página.

No hay comentarios.: