Tablón de anuncios para Blogger

Este script me lo acercó Stepenwolf y lo tiene implementado en su blog, Fotografías de la vida irreal allí, justo al principio, debajo del header, con el nombre de Tablón de anuncios.

¿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 normal

Una 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>

La mejor demostración está en Fotografías de la vida irreal, tambien puede consultarse el script original y aquí hay otra bastante elemental:

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 {.........}