[Tutorial] Cabecera que cambia al actualizar la página
21:57Primero, crea las imágenes que van a ir en tu cabecera, esas imágenes tienen que tener el mismo ancho y alto todas, es decir, crea imágenes del mismo tamaño.
Para saber cual es el tamaño que te pide tu cabecera busca el siguiente código en tu plantilla:
#header-wrapper {
width: anchurapx;
height: alturapx;
Este código te dice la anchura y la altura, lo que esta en rojo es lo que iría sustituido por los números.
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nombre del Blog (cabecera)' type='Header'/>
</b:section>
Ahora cambia "no" por "yes" y borra lo que esta en azul.
Ahora ve a diseño y añade un html javaScript en el lugar de la cabecera, que ya se había borrado.
Ahora agrega este código en el html JavaScript:
<script>
function randRange(lowVal,highVal) {
return Math.floor(Math.random()*(highVal-lowVal+1))+lowVal;
}
</script>
<script language="javascript" type="text/javascript">
var randHdr = randRange(1,5);
if (randHdr == 1) {
document.write('<img src="URL DE LA IMAGEN 1">')
} else if (randHdr == 2) {
document.write('<img src="URL DE LA IMAGEN 2">')
} else if (randHdr == 3) {
document.write('<img src="URL DE LA IMAGEN 3">')
} else if (randHdr == 4) {
document.write('<img src="URL DE LA IMAGEN 4">')
} else if (randHdr == 5) {
document.write('<img src="URL DE LA IMAGEN 5">')
}
</script>
Ahora sustituye lo que esta en verde por las URLs de tus imagenes.
Si quieres agregar más imágenes a la cabecera lo puedes hacer pero tienes que seguir una secuencia:
else if (randHdr == 6) {
document.write('<img src="URL DE LA IMAGEN 6">')
}
Si quieres agregar una 6ta imagen tienes que agregar el código de arriba y si quieres una 7ma agrega el mismo código pero cambiando los números.
Y donde dice randRange(1,5) vas cambiando el número en rojo por las imágenes que vayas colocando.
Y listo!
Créditos por los códigos.
0 comentarios