¿Qué es lo que que hace? Permite colocar un bloque formateado como uno quiera que puede contener textos diversos que van apareciendo mediante un efecto de
fade, sobre un fondo. De esta manera, podemos agregar esta especie de
frame con anuncios de bienvenida, información específica, publicidad o lo que se nos ocurra.
El primer paso es copiar la siguiente rutina
JavaScript, pegarla en el
block de notas y guardarla como archivo con extensión
JS. Luego, deberemos alojarla en cualquier servidor
Google Page Creator o el que se quiera (Ver: Alojamiento externo
Parte 1 y
Parte 2)
/* Free online at The JavaScript Source
http://javascript.internet.com Created by: James Crooke
http://www.cj-design.com */
var list; // global list variable cache
var tickerObj; // global tickerObj cache
var hex = 255;
function fadeText(divId) {
if(tickerObj)
{
if(hex>0) {
hex-=5; // increase color darkness
tickerObj.style.color="rgb("+hex+","+hex+","+hex+")";
setTimeout("fadeText('" + divId + "')", fadeSpeed);
} else
hex=255; //reset hex value
}
}
function initialiseList(divId) {
tickerObj = document.getElementById(divId);
if(!tickerObj)
reportError("Could not find a div element with id \"" + divId + "\"");
list = tickerObj.childNodes;
if(list.length <= 0)
reportError("The div element \"" + divId + "\" does not have any children");
for (var i=0; i<list.length; i++) {
var node = list[i];
if (node.nodeType == 3 && !/\S/.test(node.nodeValue))
tickerObj.removeChild(node);
}
run(divId, 0);
}
function run(divId, count) {
fadeText(divId);
list[count].style.display = "block";
if(count > 0)
list[count-1].style.display = "none";
else
list[list.length-1].style.display = "none";
count++;
if(count == list.length)
count = 0;
window.setTimeout("run('" + divId + "', " + count+ ")", interval*1000);
}
function reportError(error) {
alert("The script could not run because you have errors:\n\n" + error);
return false;
}
var interval = 7; // interval in seconds
var fadeSpeed = 40; // fade speed, the lower the speed the faster the fade. 40 is normalUna vez subido el script, lo agregamos al HEADER de la plantilla de la siguiente manera:
<script type="text/javascript" src="URL_archivoJS"></script>
A su vez, también agregamos una sección con las propiedades CSS básicas del tablón. Todas ellas, las modificaremos sobre la marcha para que se adapten a lo que deseamos.
<style type="text/css">
#tic {
/* las propiedades del tablón */
border: .05em #CEC3AD solid;
font-size:0.85em;
padding:10px;
width:400px;
line-height:20px;
}
#tic * {
/* esconder */
font-size: 1em;
margin:0px;
padding:0px;
display:none;
}
#tic a {
/* propiedades del contenido */
display:inline;
}
</style>
Para utilizar esta rutina, simplemente creamos un bloque DIV donde se nos ocurra o, en Blogger, agregamos un elemento HTML/JavaScript a la plantilla y allí creamos el bloque. Por ejemplo:
<div id='tic'>
<h3>ESTE ES UN TITULO</h3>
<p>[aquí ponemos un párrafo]</p>
<p>[este es otro]</p>
<p>[y todos los que se quieran]</p>
</div>
<script type='text/javascript'>
initialiseList("tic");
</script>
ESTE ES UN TITULO
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
CON VARIOS PARRAFOS
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Hacer
click para ver el tablón.
El script tiene muy pocas cosas que podemos configurar, la primera es la velocidad del
fade, eso se controla con:
var fadeSpeed = 40
al aumentar el valor, el
fade se hace más lento.
Otra variable con el que se puede jugar es:
var hex = 255;
que indica el máximo componente del color, si en esta instrucción cambiamos
hex por otro valor, el color
RGB del
fade se modificará. Además, si cambiamos esas variables dentro del bucle y colocamos un valor fijo, el
fade se hará sobre un tono específico, el bucle será más corto y la velocidad se incrementará:
tickerObj.style.color="rgb("+hex+","+hex+","+hex+")";por ejemplo:
tickerObj.style.color="rgb("128","+hex+","+hex+")";La personalización fundamental está en la parte del estilo. Allí,
#tic se refiere al rectángulo contenedor. Podemos modificar el ancho para que se adecue a nuestras necesidades y agregar una propiedad
height para que el tablón siempre tenga el mismo tamaño y lo único que se modifique sea el contenido.
También es posible modificar el tipo y tamaño de los bordes o agregarle una propiedad
background que defina un color o una imagen de fondo.
Las propiedades del contenido se establecen creando
clases para cada una de ellas:
#tic a {.........}
#tic p {.........}
#tic blockquote {.........}
#tic h3 {.........}
Y ya que estamos con las extensiones para Firefox.
Es una esfera donde hay un mapamundi dibujado y dos agujas. Una siempre está fija en las 
Los cambios climático y los daños al ecosistema que provoca inundaciones, tormentas, sequía, incendios y el deshielo de los casquetes polares "
"
