Mostrar una cabecera distinta aleatoriamente : Mundi Lima

miércoles, 29 de octubre de 2008

Mostrar una cabecera distinta aleatoriamente

7:36 | Autor: Mario |

Hoy, os voy a enseñar un script que yo uso para mostrar las animaciones de los marcianitos aleatoriamente, pero esta vez lo veremos aplicado a la cabecera del blog para que esta cambie cada vez que se cargue la pagina nuevamente.

Lo primero es hacer una copia de seguridad de la plantilla, nunca se sabe lo que puede llegar a pasar.

Todos conocemos o por lo menos intuimos que debe haber una zona en la sección de estilos CSS, en la que este declarada la cabecera del blog. Esta se le denomina #header o también podemos encontrarla como #cabecera o #header-wrapper. Pues bien, estas declaraciones serian mas o menos así:

#header {
   background:#476 url("URL DE LA IMAGEN") no-repeat left top;
   margin:0 0 0;
   color:#fff;
   position: relative;
   padding: 30px 0px 0px 40px;
   height: 60px;
}

Pues el script es muy sencillo, su única función es reemplazar la URL DE LA IMAGEN por aquellas que nosotros elijamos:

El script anterior deberéis situarlo después de la etiqueta <body>, o antes de </body>.

Para aumentar el numero de imágenes aleatorias a mostrar, solo deberéis duplicar enteramente la linea banner[X]="URL DE LA IMAGEN" en donde X sera el valor posterior al ultimo que tenéis agregado en el script, para el ejemplo anterior seria banner[4]="URL DE LA IMAGEN", y si aumentáis la lista también deberéis aumentar la variable de la ecuación de aleatoriedad: var random=Math.round(X*Math.random());, que aplicado al ejemplo anterior sería var random=Math.round(4*Math.random());.

Y para reducir imágenes igual, pero en orden inverso, es decir, quitar tantos banner[X] como queráis y reducir la variable tanto como "banner's" hayais quitado.

Espero haberlo hecho lo mas entendible posible, si tenéis alguna duda comentadlo que para eso estamos, para ayudar ;).