Coloca un Cartel de avisos que cambia de colores al azar

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Caja de texto o cartel de advertencia con fondo de color al azar

Hay varios trucos que nos ayudan a mostrar artilugios al azar o de forma aleatoria, desde imágenes hasta frases oentradas.

Pero esto es diferente. Se trata de una caja de texto con una particularidad muy especial: tiene un fondo de color verde, uno de color azul, otro de color lila... y los va mostrando de forma aleatoria, cada vez que se actualiza o se navega por el blog.

Se puede insertar tanto en una entrada cualquiera como en un elemento de página html-javascript.


 Ver ejemplo en funcionamiento

Diseño>añadir gadget (elemento de página)>html-javascript

Pega este script:

<script type="text/javascript">
var coloresaleatorios=["#cc66ad", "#66c8cc", "#66CC66", "#ccb566", "#8066cc"]
var alazar_color=Math.floor(Math.random()*coloresaleatorios.length)
if (coloresaleatorios[alazar_color].indexOf(":")!=-1){
coloresorden="background-color: "+coloresaleatorios[alazar_color].split(":")[0]+";"
coloresorden+="color: "+coloresaleatorios[alazar_color].split(":")[1]+";"
}
else
coloresorden="background-color: "+coloresaleatorios[alazar_color]+";"
document.write('<style type="text/css">\n')
document.write('.coloralazarbalcn{'+coloresorden+'}\n')
if (coloresaleatorios[alazar_color].split(":").length==3)
document.write('.coloralazarbalcn a{color:'+coloresaleatorios[alazar_color].split(":")[2]+';}\n')
document.write('<\/style>')</script>

Lo que te muestro en color verde son los códigos de los colores de fondo.

Puedes sustituirlos por tus colores favoritos utilizando la tabla de colores.

Si deseas añadir más colores de fondo, utiliza "#66CC66" tantas veces como desees pero ten en cuenta que debes separarlo por comas.

1) Para poner la caja en un gadget o elemento de página de la barra lateral pega esta línea debajo del script anterior:

<div style="margin: 4px; padding: 6px; border: 2px solid #cccccc;" class="coloralazarbalcn">TEXTO, CODIGO, AVISO O IMAGEN</div>

Reemplaza lo que ves en naranja por el contenido de la caja.

2) Para poner la caja en una entrada, guarda el gadget en el que pegaste el script y utiliza esta línea en el post para mostrarla:

<div style="margin: 4px; padding: 6px; border: 2px solid #cccccc;" class="coloralazarbalcn">TEXTO, CODIGO, AVISO O IMAGEN</div>

Reemplaza lo que ves en naranja por el contenido de la caja.

El cartel tiene un fondo de color gris. Podrás editarlo conociendo cada atributo:

border: 2px solid #cccccc; 2px es el grosor del borde. Incrementa o disminuye el valor para modificarlo.

El estilo es solid (normal) pero puedes utilizar otros modelos como dashed (lineal) o dotted (punteado).

Por último, #cccccc que representa el color del borde. Cámbialo haciendo uso de la tabla de colores.

Eso es todo por ahora, si necesitas cualquier tipo de ayuda avísame.