JMiur [E]

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:



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

16 comentarios:

Pepiche  

Muy interesante este script,la verdad,muy bueno,lindo para implementarlo.....

Saludos jmuir ;)

Responder
JMiur  

Puede ser un poco engorroso para armarlo gráficamente pero una vez hecho, el resultado es interesante.

Responder
bloggerxero  

holaaa! me interesaron mucho los articulos y quisiera extender una invitacion intercambiar enlaces con tu web, somos un equipo y actualmente tenemos dos proyectos para publicitar blogs, para obtener mas visitas y mas trafico, asi que te invito a leerlos y a participar de alguno o de los dos, un gran saludo y desde ya muchas gracias por leer el mensaje!

bloggerxero cadena de enlaces!

Directorio bloggero, enlaza tu blog!
exitos en este 2008! lleno de bendiciones y sigue asi con tu blog! ta chulo :)

Responder
Rubén  

Hola JMiur de nuevo, espero no abusar de tu amabilidad (si es así, dímelo y trataré de esperar un poco entre mis consultas).
Estoy intentando incluir este tablón de anuncios en www.alicantevivo.org, y algo tengo que estar haciendo mal, porque me sale el cuadro blanco pero no el texto dentro (lo puedes ver en la sidebar de la derecha, arriba del todo, bajo "Avisos")

La verdad es que puede ser que no coloque bien los códigos. ¿En qué lugar exactamente del header tengo que poner la url del script? ¿Y las propiedades css?
Puedes indicármelo con algo tipo "antes de /head" y cosas así para que pueda localizarlo...?? gracias!

Responder
JMiur  

Por lo que veo de tu código fuente, una aprte del elemento de la sidebar dice:

<script type="text/javascript"><br/>initialiseList("tic");<br/></script>

Primero que nada, entonces, deberías quitarle esas dos etiquetas <br/> porque en este momento, el script no se ejecuta.

Responder
Rubén  

JMiur, por favor, cuando puedas intenta echar un vistazo, llevo una semana intentando solucionarlo para que funciona el tablón en www.alicantevivo.org pero no sé qué estoy haciendo mal... somos una asociación cultural y nos viene muy bien este tablón para llamar la atención sobre actividades a los lectores. Mil gracias, como siempre.
www.alicantevivo.org

Responder
JMiur  

Rubén:

Por lo que logro ver online habría dos temas. Por un lado, faltarían las definiciones de estilo, el CSS.

Por otro lado, me da la impresión que hay un error en la transcripción del script en si mismo. Lo he cambiado en el post por si el problema es que allí se produce ese esrror al copiar y pegar pero, para más seguridad, lo he colocado en un archivo de texto para que lo descargues. AQUÍ y lo cambies. Simplemente reemplaza el archivo externo por ese archivo, camiando los contenidos.

Veamos si el problema está allí.

Responder
Rubén  

JMiur, muchas gracias, al final el JS era el problema. Lo he estado probando, pero me ralentiza un poco la carga del blog, así que lo probaré un poco en un blog de pruebas de momento, a ver cómo consigo que tenga el tamaño fijo y cosas así.
Muchas gracias, como siempre. eres un "blog-hero"

Responder
JMiur  

Me alegro que lo arreglaras. Evidentemente, fue un error del mismo post.

Responder
Miguel Angel S. D.  

bueno pues te dejo me maill para comunicarnos yo tengo un blog igual y para compartir ideas y toodos

winboox@hotmail.com

Responder
Mauro Fabián  

hola me llamo mauro fabian y quiero que sepas que tu blog esta muy buenos quisiera que veas el mio y si estas interesado seas un seguidor de primeros auxilios www.aprende-ayuda.blogspot.com te aseguro que aprender esto es muy importante para cualquier persona. te felicito tu blog es buenisimo.

Responder
Takeshi  

Muy interesante el truco, creo que lo voy a probar pero antes me gustaria preguntarte si se puede hacer alguna de estas modificacines y en ese caso cuales son los pasos a seguir:

* se puede poner un link? xq si le interesa algun titulo o la noticia q aparece en el tablon haga click para leerlo con mas detalles.

* o en vez de mostrar texto predefinido, se puede hacer que muestre los post de una determinada etiqueta?

Responder
JMiur  

Esto ya tiene muchos años pero, imagino que se puede poner un enlace ya que dentro del div 'tic' podría ir cualquier etiqueta HTML.

Lo de mostrar los posts, no, eso no podría hacerse, requeriría de un script más complejo como este

Responder
Takeshi  

Gracias JMiur x responder mis dudas

Responder
Rolando  

Muy interesante el truco, creo que lo voy a probar a ver que tal.

audiolibros gratis

Responder
Por la III República Española  

aquí dejo yo mi blog ya que no podido hacerlo hay es muy interesante y cambia constantemente
http://porlalibertaddelproletariado.blogspot.com/

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR