Texto e imágenes aleatorias

El siguiente truco te permite añadir a tu página una imagen o texto, que irá cambiando cada vez que el usuario recargue o ingrese de nuevo a la página. De esta manera puedes incluir, por ejemplo, algunos de tus pensamientos favoritos para que la gente los lea, y se encuentre uno nuevo cada vez que entre a tu blog, o para poner fotos que quieras compartir, con el mismo comportamiento.
Para verlo funcionando haz clic en "Recargar" o "Actualizar" en tu navegador, y verás que al hacerlo el texto y la imagen cambiarán por otro texto y otra imagen.

Para implementar esto en tu blog (en Blogger), sigue estos pasos:

1. Ve a la pestaña "Plantilla" o "Diseño" de tu panel de Blogger, y ahí selecciona la pestaña "Edición de HTML". Se abrirá una página que contiene el código HTML de tu blog. Recuerda que siempre debes guardar una copia de seguridad de tu plantilla antes de modificarla.

2. Busca en el código de tu plantilla la etiqueta head e incluye debajo de ella el siguiente código:

<script type='text/javascript'>
var numeroitems = 4 ;
var numaleatorio = Math.random() ;
var aleatorio = Math.round( (numeroitems-1) * numaleatorio) + 1 ;
items = new Array>
items[1] = "Elemento 1"
items[2] = "Elemento 2"
items[3] = "Elemento 3"
items[4] = "Elemento 4"
var item = items[aleatorio]
</script>

Lo que hace el código anterior es seleccionar uno de los elementos que le indicamos, al azar. Deberás sustituir "Elemento 1", "Elemento 2", "Elemento 3" y "Elemento 4" por el texto o las imágenes que quieras que aparezcan aleatoriamente.

Por ejemplo si quieres aplicar imágenes aleatorias, el código sería algo como esto:

<script type='text/javascript'>
var numeroitems = 4 ;
var numaleatorio = Math.random() ;
var aleatorio = Math.round( (numeroitems-1) * numaleatorio) + 1 ;
items = new Array
items[1] = "http://www.123clipart.com/freestuff/
backgrnds/bg1.jpg"
items[2] = "http://www.123clipart.com/freestuff/
backgrnds/bg11.jpg"
items[3] = "http://www.123clipart.com/freestuff/
backgrnds/bg23.jpg"
items[4] = "http://www.123clipart.com/freestuff/
backgrnds/bg24.jpg"
var item = items[aleatorio]
</script>

Verás que "Elemento 1", "Elemento 2", "Elemento 3" y "Elemento 4" han sido sustituidos por las direcciones URL de las imágenes.

En el caso de quieras aplicar texto aleatorio, lo único que tienes que tienes que hacer es indicar las frases que quieras que se muestren aleatoriamente. Y no tienen que ser solo cuatro elementos, pueden ser todos los que tu quieras, sólo tienes que crear otra línea:

items[n] = "Elemento n"

por cada elemento que quieras, donde n sería el número del elemento, y modificar el valor de:

var numeroitems = m ;

para hacerlo coincidir con el número de elementos, donde m sería el número total de elementos.

Mira el siguiente ejemplo:

<script type='text/javascript'>
var numeroitems = 11 ;
var numaleatorio = Math.random() ;
var aleatorio = Math.round( (numeroitems-1) * numaleatorio) + 1 ;
items = new Array
items[1] = "Hola"
items[2] = "Esto es un texto aleatorio"
items[3] = "Recarga la página y verás otro texto"
items[4] = "¿Cómo estas?"
items[5] = "Gracias por visitar (entre paréntesis)"
items[6] = "Que estés bien"
items[7] = "Los mejores tutoriales en internet están en (entre paréntesis)"
items[8] = "En serio"
items[9] = "Bienvenido"
items[10] = "Vuelve pronto"
items[11] = "No olvides guardar una copia de tu plantilla antes de modificarla"
var item = items[aleatorio]
</script>

Verás que en este ejemplo, el número de elementos es 11, y esa es la cantidad de items, y el valor de

var numeroitems = 11 ;

Ahora selecciona "Guardar plantilla" para aplicar los cambios a tu blog.

3. Ya tenemos la función habilitada, lo siguiente es aplicarla donde queramos. Lo que tenemos que hacer es incluir los códigos siguientes donde deseemos el contenido aleatorio, dependiendo de si se va a usar texto o imágenes:

Para texto:

<script language="JavaScript">
document.write(item)
</script>

Para imágenes:

<script language="JavaScript">
document.write('<img src="' + item + '">')
</script>

Puedes usar la función donde quieras (excepto en los posts). Yo la implementé como un elemento de mi barra lateral, pero puedes por ejemplo introducirla en el código de tu cabecera para que esta sea distinta cada vez que se recargue tu página.

Gracias a Ntreparentesis.blogspot.com