Cita aleatoria.
Observa,... en la línea siguiente que se muestra un mensaje de texto con color rojo.
Si actualizas la página probablemente verás que el texto cambiará… y si vuelves a hacerlo cambiará otra vez.
Este código de pocas líneas, puede servirte si deseas presentar una cita aleatoria para cada vez que ingrese un visitante a tu sitio. Lógicamente puedes personalizarlo a tu gusto, según como se explica más abajo.
El código es el siguiente:
<div id="randomquote" style="color: red; font-family: arial; font-size: 30px; font-style: italic; font-weight: bold; text-align: left; text-decoration: none;">
</div>
<script type="text/javascript">
var quoteCount = 0;
var citas = new Array ();
citas[0] = "EJEMPLO 1 - Aleatorio 1";
citas[1] = "EJEMPLO 2 - Este es un ejemplo.";
citas[2] = "EJEMPLO 3 - Actualiza tu página";
citas[3] = "EJEMPLO 4 - Comparte esta entrada";
citas[4] = "EJEMPLO 5 - Este ejemplo es <br />con salto de línea<br /> ... :)";
for (i=0; i<citas.length; i++)
{
if (citas[i] == "")
break;
quoteCount++;
}
var randomquote = document.getElementById('randomquote');
randomquote.innerHTML = citas[Math.floor(quoteCount * Math.random())];
</script>
Si deseas puedes personalizarlo
Cambia el color de la fuente, familia, tamaño y estilo, modificando el código en la primera línea:
<div id="randomquote" style="color: red; font-family: arial; font-size: 30px; font-style: italic; font-weight: bold; text-align: left; text-decoration: none;">
</div>
Modifica los mensajes que se muestran en cada cita.
citas[0] = "EJEMPLO 1 - Aleatorio 1";
citas[1] = "EJEMPLO 2 - Este es un ejemplo.";
citas[2] = "EJEMPLO 3 - Actualiza tu página";
citas[3] = "EJEMPLO 4 - Comparte esta entrada";
citas[4] = "EJEMPLO 5 - Este ejemplo es <br />con salto de línea<br /> ... :)";
Por cierto, mientras más mensajes cites será mejor,... pues habrán más alternativas para la presentación de los mismos.
En el ejemplo solo se dispusieron 5 citas con la finalidad de brindarte la mejor comprensión, pero es mejor si al código le brindas más alternativas.
Además, puedes añadirle más citas si deseas hacerlo más aleatorio, pero no olvides escribir el número que corresponde a la secuencia.
citas[#] = "El mensaje que deseas presentar…";
Unas ideas de uso de cita.
Según la temática de tu sitio podrías presentar citas tales como: frases célebres, chistes, mensajes motivadores, avisos de advertencias, consejos,... en fin, lo que consideres necesario.
Este código es ideal para insertarlo en sitios creados en Blogger, sea en un widget o el lugar que te convenga.
Un ejemplo de utilización de citas aleatorias, lo encuentras en este sitio en la sección de Recetas. Donde si no se ha realizado alguna modificación, puedes encontrar una variante de citas con un mensaje en la barra lateral. Y es porque el código fue colocado en un gadget. Si actualizas la página verás que cambiará la cita o mensaje.
Puedes ver la sección Recetas desde aquí.
Ojo: Si en tu sitio utilizas plataforma WordPress, puede que necesites recurrir al uso de un plugin para poder insertar este código. Te aconsejo que utilices el plugin Woody Snippets, el cual te ayudará a que puedas insertar códigos (lo encuentras en el repositorio de Wordpress).
No hay comentarios.:
👉 Publicar un comentario