Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

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 o entradas.

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.

Mariadeita! dice...

Muchisimas gracias por este truco. Es justo lo que queria y lo explicas de maravilla.

Gracias de verdad!

Anónimo dice...

Hola oye te dejo mi correo (daniazaragoza@ymail.com) tengo algunas dudas.

Espero tu respuesta

saludos!!!

Jaime Trujillo Escobedo dice...

Es un placer el haberte ofrecido el truco, Mariadeita!.

Gracias por comentar.

Jaime Trujillo Escobedo dice...

Anónimo 2, ¿de que se trata? quizás pueda ayudarte por medio de un comentario (lo que resulta más rápido ya que el correo no lo reviso "a diario").

Fuentecillas dice...

Hola Jaime.
Estoy aprendiendo mucho con tus trucos y cosillas nuevas.
Lo probamos hoy mismo.
Gracias .

Jaime Trujillo Escobedo dice...

Ya veo, Fuentecillas. El blog está mucho más atractivo, me gusta mucho la forma con la que lo estáis decorando.

Si necesitas ayuda o tienes cualquier duda deja un comentario ;).

Anónimo dice...

eres una persona muy buena onda a un que no te conosco

Jaime Trujillo Escobedo dice...

Muchas gracias Anónimo, de veras, gusta leer cosas así.

¡Saludos y espero conocerte!

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo