Páginas

03 noviembre 2011

Cuadro de texto "cambiante" en blogger

Voy a explicar cómo se puede poner un texto “cambiante” o "rotando" del estilo que tengo yo en la barra lateral. En dicho gadget tendremos una serie de frases que irán cambiando cada vez que transcurra un tiempo prefijado por nosotros.

Nos vamos a Diseño del blog y añadimos un nuevo gadget. De los que nos aparecen elegimos HTML/Javascrip.



Al pulsar sobre el + se nos abre una nueva ventana:



Le damos un título al gadget o lo dejamos en blanco si no queremos título.

Dentro de la parte “Contenido” pegamos el código que os pongo a continuación. Obviamente primero cambiamos el texto “TEXTO FRASE 0” con la frase que queremos que nos salga y “-AUTOR 0” con el autor. Si no queremos poner autor podemos eliminar la etiqueta br, es decir, nos quedaría una línea como esta: frases[0] = "TEXTO FRASE 0".

Podemos incluir tantas frases como queramos asignándoles números consecutivos:
frases[0] =
frases[1] =

frases[100] =

<script type="text/javascript">
var indice = 0;
frases = new Array();
frases[0] = "TEXTO FRASE 0<br>-AUTOR 0"

frases[1] = "TEXTO FRASE 1<br>-AUTOR 1"

frases[2] = "TEXTO FRASE 2<br>-AUTOR 2"

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();",10000);
}
</script>

<div id="rotando" style="height:120px;margin:0px auto;font-weight:bold;color:#990099;"></div>
<script type="text/javascript">rotar();</script>


También podemos cambiar algunos parámetros para adaptarlo a nuestro blog:

-Velocidad de cambio en milisegundos - setTimeout("rotar();",10000);

-Alto de la “caja” - height:120px

-Margen de la “caja” - margin:0px

-Ancho en la fuente - font-weight:bold
Cambiar 'bold' por 'normal', 'bolder', 'lighter' o un valor numérico entre 100 y 900, en donde 400 equivale a 'normal' y 700 a 'bold'.

Color de la fuente - color:#990099

El tamaño de la fuente es el que tenéis definido por defecto en el sidebar de vuestro blog.

También podéis mover el gadget, una vez guardado, a cualquier posición de vuestro blog arrastrándolo. No hay ningún problema en ponerlo en la cabecera, pie, o debajo de cada entrada.

Espero que os sea de utilidad.

El gadget es una versión modificada de uno visto en Oloblogger

1 comentario:

Los comentarios son moderados. No esperes ver tu comentario de inmediato.

Los comentarios evangelizantes o cualquier intento de salvar almas son bien recibidos, se expondrán en un lugar visible del blog para que podamos reírnos.
Lo mismo es aplicable para magufos, supersticiosos varios, conspiranoicos y demás iluminados de pobre o nula argumentación.


Códigos para comentarios:

Negrita: <b>TU TEXTO</b>
Cursiva: <i>TU TEXTO</i>
Enlace:<a href="http://www.pagina.com">Texto explicativo</a>

Gracias por comentar.

Nota: solo los miembros de este blog pueden publicar comentarios.