En ocasiones deseas darle a su web un toque visual, informativo, publicitario, etc. mostrando un mensaje o cita aleatoria.
Así, deseas mostrar un mensaje con un texto diferente cada vez que alguien visualice tus páginas, por lo que este código puede servirte para cumplir ese cometido.
Mensaje variable o 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 mensajes o cita aleatoria 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 cita aleatoria, lo encuentras en este mismo 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 (Debajo del menú Recetas de cocina).
Y es porque el código fue colocado en un gadget.
Si actualizas la página o ingresas a ver cada una de las recetas, 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).
Mira aquí otros post con Códigos
- Más sobre el autor
Me encantan los blogs y todo lo que se puede aprender con ellos.
Me desempeñé como profesor de sistemas informáticos unos años de mi vida. Estudios de Licenciatura en Publicidad y Marketing. Tnlgo. en Sistemas de Computación, enseñando lo poco o mucho que puedo saber y ahora con gusto lo comparto con ustedes.
Soy autor y fundador de este sitio. Me encantan los blogs y todo lo que se puede aprender con ellos.
Unos años de mi vida me desempeñé como técnico en una empresa de telecomunicaciones y otros como profesor de sistemas informáticos, enseñando lo poco o mucho que puedo saber y ahora lo comparto con ustedes.
En casa, no le huyo a preparar recetas de cocina, sobre todo si se trata de compartir la mesa con mis hijos. Me gusta también ver la vida en el proceso de las plantas y el respeto a los animales.
Tengo estudios formales de Tecnología en Sistemas de Computación y Licenciatura en Publicidad y Marketing. Aunque sobre varias temáticas me gusta ser autodidacta y experimentar para obtener resultados que pueda compartir de manera confiable.
Sin embargo, respecto a mi formación, regularmente evito me llamen por título y simplemente soy Vicente Ramírez, un instructor, un papá, un amigo. Y es que en ocasiones he escuchado cuando a alguien le preguntan por su nombre y responde… Mi nombre es “Ingeniero Juan Pérez” o “Master Ana Piguave”, por lo que me pregunto si sus padres le habrán puesto por nombre “Ingeniero” o “Master” (😃 Je, je, je, una cosa es el nombre, otra cosa es la profesión).
Realmente me apasiona el emprendimiento combinado con la tecnología, por lo que me he dado impulso para gestionar con mi proyecto web actual, plasmando este blog en el que se incluyen varias temáticas.
Así, esta web nace con la vocación de ser un sitio para compartir y divulgar estos conocimientos combinados con el de otros autores que poco a poco se van integrando.
Comparte tu enlace