Está basado en el mismo JavaScript que genera frases aleatorias, añadiendo una función que captura el elemento por su ID (en el ejemplo rotando) para su posterior sustitución. Esa función incluye al final una llamada a sí misma, que hace que se vuelva a ejecutar automáticamente cada cierto tiempo.
Este es el código y lo podéis añadir en un gadget tipo HTML/JavaScript o en una entrada. Si lo queréis poner directamente en la plantilla, tendréis que sustituir todas las comillas dobles (") por comillas simples (').
<script type="text/javascript">
var indice = 0;
frases = new Array();
frases[0] = "Texto1";
frases[1] = "Texto2";
frases[2] = "Texto3";
frases[3] = "Texto4";
indice = Math.random()*(frases.length);
indice = Math.floor(indice);
function rotar() {
if (indice == frases.length) {indice = 0;}
document.getElementById("rotando").innerHTML = frases[indice];
indice++;
setTimeout("rotar();",5000);
}
</script>
<div id="rotando" style="height:60px;margin:0px auto;"></div>
<script type="text/javascript">rotar();</script>
var indice = 0;
frases = new Array();
frases[0] = "Texto1";
frases[1] = "Texto2";
frases[2] = "Texto3";
frases[3] = "Texto4";
indice = Math.random()*(frases.length);
indice = Math.floor(indice);
function rotar() {
if (indice == frases.length) {indice = 0;}
document.getElementById("rotando").innerHTML = frases[indice];
indice++;
setTimeout("rotar();",5000);
}
</script>
<div id="rotando" style="height:60px;margin:0px auto;"></div>
<script type="text/javascript">rotar();</script>
Debéis sustituir TextoX por los distintos textos que queréis que vayan apareciendo. Se pueden añadir más sin problemas, generando a continuación de frases[3] = "Texto4"; más líneas con el mismo formato, sin olvidar ir cambiando el índice de cada elemento (frases[4], frases[5], frases[6], etc.)
Para aumentar o disminuir el tiempo entre frase y frase, hay que cambiar el valor de setTimeout, que viene en milisegundos y que en el ejemplo está establecido en 5 seguntos (5000).
Por último el height que se ha incluído en el estilo de la capa, sirve para que no cambie el tamaño del div en función de la distinta longitud del texto. De otra manera, todo el contenido de la página se ajustaría (movería) según la frase fuera más o menos larga, resultando probablemente bastante incómodo para leer.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
¡Hola!
ResponderEliminarPrimeramente; ¡Gracias por tus aportes!
He probado lo que has explicado y no hubo problemas, muy fácil de hacer.
Me agradaría saber cómo hacer para que la frase tenga un color determinado y que esté escrita en letra negrita. La deseo poner al costado del blog.
¿Es posible? ¿Será sencillo de hacer?
Un saludo desde Mendoza, Argentina.
Que bueno :D
ResponderEliminarOye tengo una duda que no tiene que ver con el tema, ¿como pongo bordes redondos a la sidebar?
que cada gadget tenga su borde redondeado. uso el diseñador de plantillas.
mi web: www.webwegame.co.cc
estoy en reformas con el diseño de mi web en estos momentos, y por eso me ha surgido esa duda porque no me gusta como se ven los picos.
Amanda, el código está preparado precisamente para colocar en la barra lateral, así que sólo tienes que copiar y pegar. Para cambiar el aspecto del texto, sólo tienes que insertar propiedades dentro de:
ResponderEliminarstyle="height:60px;margin:0px auto;"
Por ejemplo, para negrita y color, sería:
style="height:60px;margin:0px auto;font-weight:bold;color:#990000;"
We Game / Emilio, la forma más fácil es usando la propiedad border-radius y aplicarla a #sidebar-wrapper. Aquí tienes un generador para conseguir el efecto exacto, pero te advierto de que en los navegadores más antiguos, se seguirán viendo rectas:
http://css3generator.com/
Hola, he leído varias veces tus publicaciones, pero nunca te he felicitado, ESTAN TODAS MUY BUENAS. Hoy he tratado de probar tu artilugio y me ha quedo la duda de como haces para que tenga un fondo el texto aleatorio, como el de tu ejemplo. Gracias. Si quieres darme la respuesta por correo ya me suscribí.
ResponderEliminarVirginia, todo lo que tenga que ver con el estilo de la capa, lo tienes que insertar dentro del STYLE.
ResponderEliminarPor ejemplo, para un fondo oscuro y letras blancas...
<div id="rotando" style="background:#333333; color:#ffffff;height:100px;padding:10px;margin:0px auto;"></div>
Gracias Olaman... Lo pruebo y te aviso. ♥
ResponderEliminarTodo quedo muy bien, justo lo que necesitaba. Probado y aprobado. =º)
ResponderEliminarSsssstupendo ;)
ResponderEliminar¿En qué blog lo tienes puesto Luis?
ResponderEliminarSería interesante que esas frase1, frase2, etc, fueran a su vez enlaces de URL de títulos artículos del post, por ejemplo. No encuentro como hacerlo. ¿Es posible?.
ResponderEliminarBucan, manualmente sólo tendrías que usar este otro truco, http://goo.gl/ZrDb0, seleccionando y programando tú las entradas que quisieras.
ResponderEliminarSi lo quieres hacer automático, ya tendrás que buscar un slide para entradas recientes, que así es como se llama. Pero ha de ser en otra web, porque yo no he publicado nada sobre eso. Lo siento.
Buen aporte!
ResponderEliminarUna pregunta: ¿hay alguna forma de hacerlo de modo que el texto cambie aleatoriamente cada vez que se accede a la página en la que lo tienes, y no cada X tiempo?
ResponderEliminarGracias!!
Sí: Frases aleatorias
Eliminardisculpa para cambiar el tamaño de la fuente o tipografía?
ResponderEliminarOuh y olvide preguntar si se puede justificar el texto, y como poner links en ciertas palabras muchas gracias de ante mano, saludos!
ResponderEliminarHola. Pues para eso hay que recurrir a CSS como es habitual.
EliminarEn este caso sería añadiendo en cualquier línea de tu plantilla pero siempre entre las etiquetas SKIN algo así pero con las propiedades que gustes:
#rotando {font-size: 10px;color: #red;text-align: justify;}
Verás que la última propiedad es la que sirve para justificar.
Y para poner links, simplemente escríbelos con el código habitual junto con el texto que acompañe, dentro de cada elemento del array. Lo único diferente es que tienes que usar comillas simples para formarlos.
Hola,
ResponderEliminaren primer lugar muchas gracias por tu aportación.
En mi caso lo que estoy utilizando es php, ya que tengo que poner unas condiciones, y entonces utilizo el código que comentas. Mi problema es que no me modifica el color de las letras, y ya he probado varias formas y nada...¿podrías recomendarme algo?
Gracias de antemano,
un saludo.
Debería funcionarte lo mismo que expliqué en el comentario 17.1
EliminarHola, Muchas gracias por el Aporte,
ResponderEliminarMe gustaria saber si se puede detener la ejecución
al oprimir un botón en la pagina
Agradezco su colaboración
saludos
¿Te vale que se pare al hacer hover?
EliminarAñades al principio del script un var tiempo;
Luego setTimeout("rotar();",5000); lo cambias a tiempo=setTimeout("rotar();",5000);
Por último, dentro del div id="rotando" insertas esto:
onmouseover="clearTimeout(tiempo);" onmouseout="rotar();"
Eso hará que se detenga la rotación al pasar el puntero por encima y que cambie la frase al quitarlo.
Para hacer un botón supongo que con añadir esto último dentro de un enlace en lugar de dentro del DIV y cambiando onmouseover por onclick, la cosa funcionará cómo quieres. Lo que no sabría decirte es cómo retomar la rotación.
Genial Oloman. Al fin he tenido tiempo y lo he puesto en mi blog personal; solo lo modifico un poco más y lo pongo en todos mis blogs.
ResponderEliminarEstimado tengo un codigo javascript y lo deseo poner dentro de mi entrada de blogger, y no puedo hacerlo, me podrias ayudar un poco, gracias de antemano.
ResponderEliminarPocas pistas me das DAHP, porque no todo el JavaScript se puede usar igual en plantilla, en fichero o en entrada. No obstante una cosa que suele funcionar sería quitar todas las líneas de comentarios (//) que llevara y adicionalmente, escribir todo el código seguido, sin saltos de línea. Para esto último todas las líneas tienen que terminar con su correspondiente punto y como ( ; ) o corchete ( } ), según el caso.
EliminarQue tal, me interesa mucho poner este texto aleatorio, me parece muy buena idea pero no se como hacerlo. Entiendo que tengo que copiar y pegar en el codigo en mi sitio de dream weaver pero no se exactamente como y donde. podrias ser bien especifico?recien estoy empezando y no tengo mucha experiencia. Muchas gracias!
ResponderEliminarHola. Pues lo que yo no sé es como manejar Dreamweaver. Nunca he usado ese programa. Lo siento.
EliminarOk, muchas gracias! Otra pregunta, esto es jquery o java script?
ResponderEliminarAcabo de ver este comentario. Se ve que me lo salté en su momento. jQuery es una librería JavaScript, pero por si es esto lo que preguntas, este código no necesita jQuery.
EliminarHola. Quiero usar algo como esto pero que el texto se active cada día de acuerdo al dia. Para explicarme mejor
ResponderEliminarTengo el listado del mes de las Farmacias que estan de turno y quisiera que cuando entran al blog les aparezca ¨Hoy de turno Farmacia ¨tal ¨
Aquí tienes un sistema y aquí otro usando Google Drive como hoja de cálculo que a mí personalmente me parece más práctico.
EliminarEse es el método. Luego ya lo tienes que ajustar tú a tus necesidades.
Hola, gracias por este tuto me ha servido bastante pero no logro cambiarle el color al texto ya agrande el tamaño pero no me resulta cambiarle el color ¿en que parte debo agregar el codigo?
ResponderEliminareste es el codigo del color FFCB05
Aquí Nil:
Eliminarstyle="height:60px;margin:0px auto;"
En lugar de eso pon esto otro:
style="height:60px;margin:0px auto;color:#FFCB05"
Espero no llegar muy tarde...
hola!! cómo puedo cambiar la fuente???
ResponderEliminarEn esta parte del código, María José:
Eliminarstyle="height:60px;margin:0px auto;"
Si añades dentro de las comillas un font-size, font-family o font-style, podrás cambiar respectivamente tamaño, tipografía o estilo de la fuente.
Buen dia y muchas gracias por compartir su conocimiento
ResponderEliminarme puedes ayudar con algo por favor. Como seria para mostrarlo por días ejemplo lunes muestra esto martes muestra otro miércoles otro y a si sucesivamente Gracias
A ver si te sirviera esto, Juan
EliminarHola,
ResponderEliminarme interesa utilizar frases aleatorias, pero me gustaría que el texto ( o la imagen ) se mostrasen al hacer click sobre un botón. Esto es, una frase al azar cada vez que el usuario hace onclick, pero si es posible, preferiría que la página no refrescase.
En principio lo quiero implementar en un sidebar de WP.
¿podría además presentarse una imagen y un texto a la vez y que estos estuviesen relacionados (el texto y la imagen siempre se corresponden, irían juntos), pero se presentan aleatoriamente de un listado de n frases / n imágenes (he leído antes en los comentarios de "frases aleatorias" que se pueden poner un móntón)?
¿Podría cambiar el botón por otro después de presentar el contenido (la frase aleatoria)? Supongo que me refiero al texto del botón...
Son muchas dudas, pero es que no se por donde empezar. perdón.
Salu2
¿Aún contesta mensajes? ¡Qué calidad de blog!
ResponderEliminarMuy buenas, quisiera saber cómo puedo hacer que el texto cambie cada vez que se actualiza la página y no cada cierto tiempo.
Gracias, un saludo.
Busca "frases aleatorias". Está el link al principio del texto de esta misma página.
ResponderEliminarGracias Moxi por indicarle a Unknown dónde buscar :)
EliminarSobre lo tuyo ¿viste este otro post en el que precisamente se cargan frases según pinchas en un enlace (botón) desde una hoja de Drive?
Hola, Muchas gracias, yo quiero saber si se puede hacer que en algun momento se pueda con un boton detener o pausar la rotacion y al mismo tiempo la frase que quede pase a una caja de texto para ser enviada luego a un script php. En fin solo necesito saber como pausar la rotacion y enviar lo que queda en ese div a una caja de texto de un formulario html dentro del mismo documento. Gracias
ResponderEliminarNo te preocupes ya obtuve la solucion:
ResponderEliminarMe tocó subirlo a un documento de Word para compartirlo contigo
aqui está
https://drive.google.com/file/d/1XPrNnCoSoj2Cs81TSvhIZVmcesUKyGDo/view?usp=sharing
Espero tu opinion
Gracias mil!!! ME funciono mil TQM! Saludos Cordiales! Quedo POCA MADRE! Quedo de ti....
ResponderEliminar