Caja de avisos con efecto de desvanecimiento (Blogger)

El siguiente script nos dará una caja de mensajes con un efecto de fade, es decir, con desvanecimiento entre cada mensaje.

Aunque no tienen links los mensajes, este truquito pueden servirte para dar la bienvenida, dejar un aviso, o poner un recordatorio en el blog.

Sólo entra a Diseño > Elementos de la página > Añadir un gadget, y en un elementoHTML/Javascrip pega lo siguiente:

<script>

var delay=3000 //pausa (en milisegundos)
var fcontent=new Array()
begintag='<font face="Arial" size="2">' //tag que abre los mensajes
fcontent[0]="Esta es una caja de avisos y mensajes..."
fcontent[1]="Con un efecto de desvanecimiento..."
fcontent[2]="Aprende cómo tener uno aquí..."
fcontent[3]="<b>CiudadBlogger.com</b>"
closetag='</font>'

var fwidth=160 //anchovar fheight=150 //alto

///No editar/////////////////

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>=fcontent.length)
index=0
if (DOM2){
document.getElementById("fscroller").style.color="rgb(255,255,255)"
document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
colorfade()
}
else if (ie4)
document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag
else if (ns4){
document.fscrollerns.document.fscrollerns_sub.document.write(begintag+fcontent[index]+closetag)
document.fscrollerns.document.fscrollerns_sub.document.close()
}

index++
setTimeout("changecontent()",delay+faderdelay)
}

// colorfade() partially by Marcio Galli for Netscape Communications. ////////////

frame=20;
hex=255 // Initial color value.

function colorfade() {
// 20 frames fading process
if(frame>0) {
hex-=12; // 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(0,0,0)";
frame=20;
hex=255
}
}

if (ie4||DOM2)
document.write('<div id="fscroller" style="border:1px solid black;width:'+fwidth+';height:'+fheight+';padding:2px"></div>')

window.onload=changecontent
</script>


<ilayer id="fscrollerns" width="&{fwidth};" height="&{fheight};"><layer id="fscrollerns_sub" left="0" width="&{fwidth};" top="0" height="&{fheight};"></layer></ilayer>

Cambia lo que está en color rojo por tu mensaje, puedes agregar o quitar más líneas.

Puedes modificar el ancho y alto de la caja cambiando los valores que están en color azul al inicio del código.

Para quitar el borde de la caja busca donde dice border en color verde y cambia 1px por 0px.

Si quieres cambiar el color del texto busca lo que está en negrita style.color="rgb(0,0,0)" y pon ahí el código hexadecimal del color, por ejemplo si lo quieres rojo sería rgb(255,0,0), si lo quieres color verde sería rgb(00,80,00), amarillo sería rgb(255,255,0), etc.

IMPORTANTE: Es posible que si tienes muchos script en tu blog, la caja de avisos no funcione.
Puedes ver un ejemplo funcionando en este blog de pruebas.

Categories: Gadgets, Trucos