TRUCOS y
TUTORIALES
para tu blog
No, no vendemos
camisetas... aun
Camiseta Ciudad Blogger

Caja de avisos con efecto de desvanecimiento

28 de julio de 2009 | Número de comentarios45 comentarios
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 | Añadir un gadget, y en un elemento HTML/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 //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.

45 comentarios :

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

    Un abrazo!!!

    ResponderEliminar
  2. Cierto, ya lo ocuparé yo después.

    Un abrazo.

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

    SALUDOS

    ResponderEliminar
  4. Hola Los Matesitos,

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

    Saludos y gracias por tu visita.

    ResponderEliminar
  5. MUY BUENO ESTE BLOG , YA ME FUNCIONO FIJATE MI BLOG

    HTTP://WWW.ELLEONDEBERNALOESTE.BLOGSPOT.COM

    ResponderEliminar
  6. Hola bernal oeste,

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

    ResponderEliminar
  7. 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!!

    ResponderEliminar
  8. 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!

    ResponderEliminar
  9. 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!!

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

    gracias!

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

    ResponderEliminar
  12. estimado, muchísimas gracias, resultó.

    un abrazo.

    ResponderEliminar
  13. hola El Potro, si me podes ayudar.. estoy buscando el codigo de como hacer para q del puntero del mouse al pasar bote estrellas... alguien sabe...
    fijate en este blog:
    http://fondos240.blogspot.com/

    ResponderEliminar
  14. Hola Franz,

    Mira esta entrada, ahí está el código que se usa en Fondos240.

    ResponderEliminar
  15. El Potro, muchas gracias, saludos desde Peru ...

    ResponderEliminar
  16. Hermano!

    He puesto esto en el blog de los controladores, pero cambiando el color de las letras a rojo. Solo que en cada cambio de frase el texto aparece menos de un segundo en negro y después pasa a rojo. Como lo mantengo de un solo color?

    ResponderEliminar
  17. También, intenté agregarle otra linea de texto, pero se me desapareció todo el gadget del blog. Fui a diseño, eliminando lo ultimo agregado en el gadget todo quedo bien.

    ResponderEliminar
  18. Lo del color no sé, estuve haciendo pruebas y no conseguí que se quedara todo de un solo color :(
    Para agregar más líneas de texto sólo agrega debajo de la última frase otra línea como esta:

    fcontent[4]="Otra frase"

    Toma en cuenta que ahí ha cambiado el número entre corchetes, ahora es el 4, si agregas otro más deberá ser el 5 y así sucesivamente.

    ResponderEliminar
  19. Hola Potro,me tienes que perdonar por mi insistencia, pero hay algo en mi blog que me tiene más que cabreado y es una caja de confirmar navegación que aparece cada vez que pincho en una página o enlace de mi blog.Uso chrome,y me tiene hinchado ya, no se que hacer para que no aparezca más ya que lleva así dos días.El sitio es : http://canarias50lamili.blogspot.com .Por favor,échame un cable lo antes posible.Muchísimas gracias.

    ResponderEliminar
  20. Hola Francmi08,

    Leyendo un poco en la red parece que el problema se da con el gadget de Messenger. Prueba quitándolo y mira si desaparece ese mensaje emergente.

    ResponderEliminar
  21. Potro,no se que haríamos sin ti,por fin ha desaparecidoooooooooo,un milón de gracias por tu inestimable ayuda.Ahora, ¿me podrías aconsejar un chat que funcione bien?? Por favor.

    ResponderEliminar
  22. Pues eso sí no sé porque nunca he usado uno, pero Chatango es un tanto popular y visualmente es de los más discretos.

    ResponderEliminar
  23. Disculpa Potro esto ya lo cambie style.color="rgb(255,255,0)" es amarillo, pero de donde podria cambiar el color del efecto fade (o cuando se desvanece) para que en lugar de aparecer la letra blanca aparezca roja, eso era todo muchas gracias.

    ResponderEliminar
  24. Hasta donde recuerdo no tiene esa opción o.O

    ResponderEliminar
  25. Potro,
    Soy una pupas.
    Lo pongo todo tal cual tu lo tienes y pum, se ve, y yo me sonrio. Entonces cambio los textos y pum, desaparece, queda el espacio pero no se ve.... snif, snif.
    Yo, quizá esté complicando mucho las cosas, quisiera una cajita con frases que se vayan cambiando, (con un tipo de letra determinado y de un color determinado), como esto pero además con un fondo, con una imagen de fondo, y que enlazara una de ellas, de las frases, con la tienda on line, y en esa frase poner tambien el muñequito que es el logo....
    Please, acudo a tu eterna sapiencia....
    ¿Sigues sin encontrar, como yo, nada para mis tristes y lentos alfanuméricos?
    Besos a montones y eternamente gracias, mi sol.

    ResponderEliminar
    Respuestas
    1. Hola Patricia, quizá estás eliminando las comillas al cambiar los textos.
      De cualquier forma puedes ver esta entrada, con ese sistema los textos tienen enlaces, y también puedes usar imágenes:
      http://ciudadblogger.com/2010/08/anuncios-rotativos-con-jquery.html

      Besos.

      Eliminar
  26. Mi querido Potro,
    Muchas gracias de nuevo.
    No, no es eso exactamente, es una cajita con una imagen de fondo y que con efecto deslizante vayan apareciendo frases, y, sólo una con un iconito o logo y enlace. Te mando un ejemplo que ví y me pareció muy útil para que al abrir el blog, se pudiera ver la tienda
    selobaby.blogspot
    Enormes gracias, de nuevo y besitos

    ResponderEliminar
    Respuestas
    1. Hola Patricia, esa es una imagen animada en formato GIF que han hecho con algún programa, no es un script que tenga programadas palabras, imágenes, etc.
      Las únicas opciones de "avisos" o mensajes para poner en el blog que conozco, son las que están aquí en Ciudad Blogger, pero si sabes usar un programa que cree animaciones en GIF entonces podrás hacer algo similar sin problema.
      Te mando un beso.

      Eliminar
    2. Pues voy a intentarlo, porque mira que me chincha....
      Yo te mando a montones, y te agradezco, nunca sabrás cuanto, tu tiempo, ya te contaré mis pesquisas....

      Eliminar
  27. Que tal amigo mío. Otra vez en la vuelta. Estoy necesitando para el Kiosco un par de cosillas ;)) te explico.
    Implementar esta entrada con imágenes pero una en el final de cada Entrada (eso se dónde colocar para que salga automáticamente en todas las entradas) como tengo el link a la Tienda y el descargar, justo debajo de éste último, y el segundo en lugar de "PUBLICAR UN COMENTARIO EN LA ENTRADA" con otro texto o una imagen. Puede ser? Espero tus comentarios. Gracias, hasta pronto y un abrazo =)

    ResponderEliminar
    Respuestas
    1. Hola ELSACERDOTE2011. No sé si entendí bien, ¿quieres poner el script de esta entrada al final de las entradas? El procedimiento sería el mismo, si te marcara error prueba poner después de <script> esto:
      //<![CDATA[

      Y antes de </script> esto:
      //]]>

      Lo del comentario en la entrada sí no he comprendido nada, ¿me puedes dar más detalles?

      Eliminar
    2. Presente teacher ;) Siendo el procedimiento el mismo, entonces iría colocado antes de ]]> ? o dónde? Para que quede debajo de cada entrada? LA IDEA de esta implementación es PROPONER AL USUARIO QUE SE REGISTRE PARA SEGUIRNOS EN CADA PUBLICACIÓN (te pregunto, te parece el mejor método? o se te puede ocurrir otro?, cual es tú opinión?) para mí tu opinión es importante. =)
      Respecto del otro item, lo encontré en IMAGEN EN EL FORMULARIO DE COMENTARIOS. Seguimos en contacto. Abrazo =)

      Eliminar
    3. A mi opinión no le hagas caso, de verdad :P
      El código lo pondrías debajo del 'post-footer'
      Saludos.

      Eliminar
    4. Para mí tú opinión VALE!!! =) y seguirá valiendo. Te aprecio a tí y aprecio mucho esta labor honoraria que tienes con todos nosotros, así que nada!!! TU OPINIÓN VALE!!!
      Nos vemos en el siguiente problema, un abrazo. ;D

      Eliminar
  28. ey.. hola solo me preguntaba y si es posible saber como haces ese efecto que tienes en muchas de tus entradas, donde agregas el codigo, y al pasar el cursor como que se oscurece o toma un color gris mas fuerte, un saludo muy cordial, y muchas gracias por leer este mensaje...

    ResponderEliminar
    Respuestas
    1. Hola Gz Mood, sólo es cuestión de que apliques estilos distintos al contenedor que quieras aprovechando el atributo HOVER, por ejemplo:

      #miDiv {
      background: #000;
      }

      #miDiv:HOVER {
      background: #ccc;
      }

      Eliminar
  29. Gracias amigo muy bueno,se te agradece ;)

    ResponderEliminar
  30. Hola Potro, me gustaría saber como puedo hacer para que el mensaje solo aparezca una vez, y no se repita, espero que me entiendas, saludos.

    ResponderEliminar
    Respuestas
    1. Hola Awaiiz, el script no tiene esa opción. Saludos.

      Eliminar
  31. Potro Aqui Otra Vez Bueno No sE Si Puedes Ayudarme Es Que Quiero Modificar Mis Comentarios Estilo Como El tuyo Igualito :D No se Si Se Puede =====Con Enumeracion y todo, ===== PD Mi blog Es. Tutorialesbyneto.Blo****.com

    ResponderEliminar
    Respuestas
    1. Tendrás que practicar con los estilos, yo aun no he publicado una entrada sobre ese tema :(

      Eliminar

Los comentarios están siendo moderados y serán publicados una vez que hayan sido revisados por un administrador.
Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
¿Te gusta Ciudad Blogger?