Rotador de mensajes con efectos

Este truco es principalmente un gadget que tiene un recuadro y dentro de este se van cambiando varios textos que van a ser predeterminados por vos. Es decir, van a haber varios mensajes (los que quieras) que se rotarán cada 5 segundos. Y lo mejor es que la trancisión de cada mensaje es llamativa...
El ejemplo del gadget lo podés ver en el "Laboratorio de TB".

Añadir un rotador de mensajes

La única manera de obtener este objeto es añadiendolo en un gadget (porque es un script). Entonces iremos una vez más a Blogger → Diseño → Elementos de la página → Click en el enlace "Añadir un gadget" → Y seleccionamos el modo de HTML/Javascript → Y ahora pegamos este código:

<script language="JavaScript1.2">
var delay=3000 //pausa (en milisegundos)
var fcontenido=new Array()
begintag='<font face="trebuchet" size=2>'
fcontenido[0]="Modifica tu blog en Teoría Blogger"
fcontenido[1]="Teoría Blogger tiene una gran cantidad de categorías para ofrecerte."
fcontenido[2]="En Teoría Blogger creces vos y nosotros también"
fcontenido[3]="teoriablogger.blogspot.com"
closetag='</font>'
var fwidth=150 //ancho
var fheight=150 //alto
var ie4=document.all&&!document.getElementById
var ns4=document.layers
var DOM2=document.getElementById
var faderdelay=0
var index=0
if (DOM2)
faderdelay=2000
//function to change content
function changecontent(){
if (index>=fcontenido.length)
index=0
if (DOM2){
document.getElementById("fscroller")
.style.color="rgb(255,255,255)"
document.getElementById("fscroller")
.innerHTML=begintag+fcontenido[index]+closetag
colorfade()
}
else if (ie4)
document.all.fscroller
.innerHTML=begintag+fcontenido[index]+closetag
else if
(ns4){
document
.fscrollerns
.document
.fscrollerns_sub
.document
.write(begintag+fcontenido[index]+closetag)
document
.fscrollerns
.document
.fscrollerns_sub
.document.close()}
index++
setTimeout("changecontent()",delay+faderdelay)}

// colorfade() partially ////////////
frame=20;
hex=255
function colorfade() {
// 20 frames fading process
if(frame>0) {
hex-=10; // increase color value
document
.getElementById("fscroller")
.style
.color="rgb("+hex+","+hex+","+hex+")";// Set color value.
frame--;
setTimeout("colorfade()",20);
}
else{
document.getElementById("fscroller")
.style.color="rgb(63, 151, 255)";
frame=20;
hex=255
}
}
if (ie4||DOM2)
document
.write('<div id="fscroller" style="border:1px solid ;width:'+fwidth+';height:'+fheight+';padding:2px"></div>')
window.onload=changecontent</script><ilayer id="fscrollerns" width=&{fwidth}; height=&{fheight};><layer id="fscrollerns_sub" width=&{fwidth}; height=&{fheight}; left=0 top=0></layer></ilayer>

Antes de pegar este código es bueno mencionar que se debe pegar en modo de Edición de HTML y no hacer click nunca en Edición RTF. Porque modificaría al Script y no funcionaría como queremos.

Modificar los mensajes

Para modificar los mensajes debes reemplazar los pequeños textos de ejemplo que se plasman en el código dado, que los he remarcado en verde.

Agregar más mensajes

Para hacer que aparezcan más de 4 mensajes que puse en el código (0, 1, 2, 3), debemos copiar una línea de mensaje debajo de la última y poner el número correspondiente. El número de mensajes que puedes poner es ilimitado.
Lo que está remarcado en rojo, es donde puedes reemplazar el tipo de fuente del gadget.

Posteado en: Gadgets,Intermedio,Javascript