­
­

[Tutorial] Cabecera que cambia al actualizar la página

21:57


En este tutorial te voy a enseñar de una manera simple, como hacer para que al actualizar tu pagina salga cada vez una imagen distinta en la cabecera o imagen principal.

Primero, 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.

You Might Also Like

0 comentarios



HUFFLEDOR
{ wear }


Translate

Instagram