Caja de avisos con efecto de desvanecimiento

|

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 elemento HTML/Javascrip pega lo siguiente:
<script language="JavaScript1.2">

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 //ancho
var 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.

12 comentarios:

cyberbloggero dijo...

Interesante bro!!. Como dices, para dejar un recordatorio o un mensaje de bienvenida, es espectacular!!!

Un abrazo!!!

Los Matesitos de Arg. de Quilmes dijo...

MUY BUENO PERO COMO LE CAMBIO EL COLOR DE LAS LETRAS LA PLANTILLA DE MI BLOG ES NEGRA

SALUDOS

El Potro™ dijo...

Hola Los Matesitos,

Ya he agregado la explicación al final del post.

Saludos y gracias por tu visita.

bernal oeste 2008 el año del leon a.v.f.b.o(Daniel fraga y Dani Fraga) dijo...

MUY BUENO ESTE BLOG , YA ME FUNCIONO FIJATE MI BLOG

HTTP://WWW.ELLEONDEBERNALOESTE.BLOGSPOT.COM

El Potro™ dijo...

Hola bernal oeste,

Ya lo vi funcionando en tu blog, qué bueno que te ha servido =)
Saludos.

Merlina dijo...

Hola Potro!! Hace algunos meses cuando entraba a tu blog, aparecía un pekeño recuadro amarillo ke decía te encontrabas de vacaciones, estaba situado en la parte superior de la página y por ahí he visto otros ke te siguen cuando vas bajando la página, yo tenía uno pero ya no me sale, no sé si es porke ya le metí demasiadas cosas al blog ke ya no funciona, pero te agradecería con la vida el ke me pasaras el dato para ponerlo en mi blog, aunke no role con el mouse, kiero poner un recuadro aparte como ese ke tú pusiste en tus vaca. SÉ ke pido demasiado, pero contribuirás a ke no kede calva de tanto sufrir y pensar cómo rayos poner uno!!
Besos y gracias de antemano!!

El Potro dijo...

Curiosamente el último comentario que acabo de responder es por el mismo código del mensaje que baja junto con la página. Ese no lo tengo, lo publicaré en estos días.
El otro que mencionas que tenía cuando estaba de vacaciones es este.
Espero que aun te sirva y no haya otro script que interfiera con su funcionamiento.

Besos!

Merlina dijo...

Eres la neta!!! Lo voy a probar rait nau y ojalá funcione, de cualkier modo, espero ke pronto publikes el ke rola con la página porke vaya ke se ve lindo. Te lo agradezco como no lo imaginas.

Besito!!

SMB dijo...

amigo, alguna posibilidad de hacer que el texto quede justificado? (izquierda y derecha)

gracias!

El Potro dijo...

Encierra el código entre:
<span style="text-align:justify;">
y
</span>

SMB dijo...

estimado, muchísimas gracias, resultó.

un abrazo.

Publicar un comentario en la entrada

Gracias por tus comentarios. Si tienes una consulta sobre tu blog deja la dirección del mismo.

 

Ciudad Blogger. Copyright 2008 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol dot com

Ir arriba Ir abajo