Frases aleatorias en tu blog

Pequeño código javascript para mostrar una frase distinta cada vez que se cargue la página. Puedes ponerlo en cualquier parte del blog, y con un poco de imaginación lograr un efecto interesante. Las frases son completamente personalizadas, puedes definir tantas como quieras y del largo que desees. El ejemplo que se muestra a continuación está funcionando (para ver una frase distinta presiona F5):




1) El código javascript


Copia y pega estas líneas en un elemento de página HTML/JavaScript:

<script language="JavaScript">
frases = new Array()
frases[0] = "Tendrá todo el dinero del mundo… pero hay algo que jamás podrá comprar…. un dinosaurio (H. J. Simpson)"
frases[1] = "En la vida hay 3 tipos de hombres, los que saben contar y los que no (H. J. Simpson)"
frases[2] = "¿¡Operadora!? ¿Cuál es el número del 911? (H. J. Simpson)"
frases[3] = "Intentar algo es el primer paso hacia el fracaso (H. J. Simpson)"
aleatorio = Math.random() * (frases.length)
aleatorio = Math.floor(aleatorio)
document.write(frases[aleatorio])
</script>

2) Cambiar y agregar frases


Simplemente reemplaza las frases por las que te gusten. Puedes añadir tantas como quieras agregando frases[4], frases[5], etc. en el orden correspondiente, siempre antes de aleatorio = Math.random()... y con la frase entre comillas.


3) Personalización (opcional)


Puedes alterar la apariencia del widget (color del texto, tamaño, alineación, etc.) insertando todo el código anterior dentro de un div, como por ejemplo:

<div style="text-align: center; color: #0000ff; font-weight: bold">

(código javascript)

</div>

(en este caso las frases se verán centradas, en color azul y en negrita)

24 comentarios:

Maestro dijo...

Hola, ¿sabes si hay alguna limitación para el número de citas o su longitud? He puesto 20 y alguna de tres líneas y no salen

Ayreonauta dijo...

Técnicamente no tiene por qué haber limitaciones. Estoy seguro de que se pueden poner miles de frases, aunque no lo he intentado. En cuanto a la cantidad de caracteres, no estoy seguro. Lo voy a investigar y te aviso (si alguien lo sabe, por favor deje su mensaje después de la señal). Pero, por las dudas, revisa que hayas copiado bien el código.

Maestro dijo...

Pufff! Te aseguro que he probado al menos cinco códigos, incluso alguno en php, de varios blogs de ayuda. No ha habido manera.

A ver si los expertos descubrís algo. Gracias

Anónimo dijo...

"Aunque la verdad sea inmensa, no hay peor ciego que el que no quiere ver"

Anónimo dijo...

Yo he encontrado una pagina que te ofrece gratuitamente un codigo que muestra una frase aleatoria diaria en tu web o blog. La dejo por si les interesa: http://www.frasecelebre.net/servicios/frases_en_tu_blog.html

Ayreonauta dijo...

Gracias. Dejo el enlace para acceder más cómodamente. Las frases son muy buenas. Advierto, sin embargo, que dicho código incluye un bonito enlace al sitio que provee las frases que puede atentar contra la estética de nuestro blog.

Esto se puede evitar, por si a alguien le interesa, agregando en la hoja de estilos CSS la siguiente línea:

a[href='http://www.frasecelebre.net']{display:none;visibility:hidden;}

(aquí preparé un ejemplo con ambos códigos)

Kus dijo...

Soy el administrador de http://www.frasecelebre.net y solo quería decir que no me parece muy ejemplar ocultar un enlace que no altera para nada el diseño como deciais más arriba. Creo que ya que ofrecemos un servicio gratuito que menos que recibir un enlace simple del blog o web que se beneficia del servicio ¿no?. En fin, es mi humilde opinión!!.

ayreonauta dijo...

A mí tampoco me parece ejemplar. Tampoco me parece ejemplar que incluyan dicho enlace. Es una elección personal.

Respeto el trabajo que hacen y, desde mi sincera (no sé si humilde) opinión, estoy seguro de que mucha gente no usa el servicio porque incluye un enlace, así que quizás ofrecerlo sin él sea una buena idea. De ninguna manera pretendo decirles qué hacer; es mi visión del asunto.

Por otro lado, este blog es para enseñarle a la gente a hacer las cosas por sí misma, pero son ellos los que decidirán qué hacer; no se fomenta eliminar enlaces ni tampoco se condena. Saludos, Kus.

Diana Vera dijo...

Ola...coloque el codigo que diste para las frases..y ahora voy a la plantila html y no encuentro el link y entonces no puedo cambiar las frases que hago por fa!!! me puedes ayudar???

ayreonauta dijo...

Diana, desde la plantilla no se puede ver el código, porque está dentro del widget y es externo (Blogger lo guarda en otro lado).

Para editarlo o borrarlo hay que ir a Panel » Diseño » "Elementos de la página" y ahí buscar el widget correspondiente y hacer click donde dice "editar" (o a veces "edit").

Si continúa tu problema, dejame un link a tu blog así lo veo. Suerte!

Anónimo dijo...

Hola, lo he estado probando pero a mi a partir de 30 frases no me funciona, queria poner bastantes mas...

Anónimo dijo...

excelente me funciona de maravilla muchas gracias, saludos desde mty mexico

Kado20 dijo...

Le sugiero algo a la Hora de Pegar el Codigo Cambiar Donde Dice
script language="JavaScript">
frases = new Array()

Por:
new Array(El numero de frases Que Tiene El Scrpt.)

snake dijo...

Tengo un código prácticamente idéntico, sólo que en lugar de poner "frases" pone "citas".

Estaba investigando sobre una cosa y me he topado con este blog. Ha sido kado20 quien ha respondido a lo que handaba buscando. Tengo el código este desde hace tiempo y no recordaba si había que modificar el new Array().

Por si a alguien le interesa, conocía otro código que hacía que la frase se desplazase, y lo fusioné con el de la frase aleatoria. Pueden verlo en mi blog.

Un saludo.

RonMocho dijo...

Buenas, quería saber si había posibilidad de poner frases con hipervínculos, por ejemplo: "deme dos de esos", e hipervincular la palabra "esos" a alguna entrada que haya en tu blog

Gracias!

ayreonauta dijo...

RonMocho, es así de simple:

frases[0] = "deme dos de <a href='#'>esos</a>"

Obviamente, reemplazando '#' por la URL del link, y conservando esas comillas simples que le rodean.

RonMocho dijo...

Sí, eso fue lo que se me ocurrió en el primer momento (cosa lógica, XD), pero el problema es que al guardar, las comillas simples se me transforman, ellas solitas, en comillas dobles, es decir, las de toda la vida...

Conclusión, que no me sale ninguna frase, supongo que por error del código :S

Gracias!

miguel_koke dijo...

se pueden poner imagenes en lugar de las frase? gracias de antemano

ayreonauta dijo...

Sí, simplemente hay que poner el código de la imagen en lugar de la frase (<img src="foto.jpg" />).

miguel_koke dijo...

no sale, ni la foto, ni las demas frases.

tubeth2000 dijo...

pues a mi tampoco me funciona y es el numero 3 que trato...:( es fustrante!! pero cuando consiga uno lo publicare en mi blgo, asi que siganme los buenos, si lo consigo y alguien lo quiere, que me escriba...

Akaki dijo...

muy buena idea, gracias por el truco,lo pondré en práctica en breve.

un saludo.

uzumakijem dijo...

Esta muy chevere el widget, muchas gracias ^^

Santy dijo...

Gracias por estos pluses que iré implementando en mi blog a medida que vaya necesitando.

Soy novato en esto, pero poco a poco iremos avanzando.

Santy