Cartel de bienvenida tipo neón

4 de febrero de 2010 72 comentarios ,
Ya tenía rato que no les mostraba estos mensajes de bienvenida que sé que a muchos les gusta, así que les muestro este cartel de bienvenida tipo anuncio de neón que me encontré y que pertenece a G.P.F.
Se trata de un mensaje de bienvenida en el cual una luz de color recorre cada letra dando la apariencia de que se trata de una anuncio luminoso de neón.
Puedes ver un ejemplo en este blog de pruebas.

Para poner este cartel en tu blog sólo entra en Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript y pega lo siguiente:
<div style="background:#000; font-size:30px; text-transform: uppercase; font-weight: bolder;"><script language="JavaScript1.2">

//Neon Lights Text II by G.P.F. (gpf@beta-cc.de)
//visit http://www.beta-cc.de

var message="Bienvenidos a Ciudad Blogger"
var neonbasecolor="gray" //color de la letra
var neontextcolor="yellow" //color de la luz neon
var neontextcolor2="#FFFFA8" //color del reflejo
var flashspeed=100 // velocidad en milisegundos
var flashingletters=3 // numero de letras alumbradas en neon
var flashingletters2=1 // numero de letras alumbradas con el reflejo (0 to disable)
var flashpause=0 // pausa entre cada repeticion en milisegundos

///No editar nada mas///

var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)

function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}

function neon(){

//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
crossref(m).style.color=neonbasecolor
}

//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor

if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2
if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor


if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
return
}
}

function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
</script></div>

Cambia lo que está en color rojo por tu mensaje de bienvenida. En las antaciones de color verde puedes ver unas variables que se pueden configurar como color del neón, velocidad, etc.
Al inicio del código en color azul podrás cambiar el color de fondo y tamaño de la letra; también puedes agregarle otros estilos si así lo deseas.

Si no sabes cómo poner un gadget debajo de la cabecera haz click en el enlace anterior.


72 comentarios en:

" Cartel de bienvenida tipo neón "

  1. Excelente Truco Hohoho
    Gracias Por Compartir Potro ^^]

    ResponderEliminar
  2. Muy bueno.

    no me canso de decir y de promocionar este blog, en serio.

    ResponderEliminar
  3. Haha De Nd Potro, Cuentas Con Mi Visita Diaria ;)

    ResponderEliminar
  4. Gildo Kaldorana, qué bueno que te ha gustado :)

    PepeX, ¿verdad que sí?

    El Venado, mil gracias, de verdad :D

    CяιsтιαиGσиzαlєz, que conste! jaja

    ResponderEliminar
  5. Jajaaj, PepeX enseñó como como hacer eso pero en flash, que coincidencia... :)

    ResponderEliminar
  6. Hola amigo, que buen truco pero ?se puede utilizar esto en el titulo de la cabecera del blog, en mi caso Librairie Espagnole et Cie? Si, si ?podrias explicarme como se hace?
    Gracias y muy chulos tus consejos como siermpre

    ResponderEliminar
  7. Ascesino96, seguro que con Flash queda mucho mejor.

    Sonieta ladeloslibros, claro que se puede, sigue este tutorial, sólo que en lugar de pegar el script que dice ese tutorial pega el de esta entrada y listo ;)

    ResponderEliminar
  8. Muy buen truco lo vi en blog de prueba y me gusto mucho

    ResponderEliminar
  9. Son dos cosas distintas, si no tienes el programa Flash (supongo que no cualquier blogger lo tiene a su disposición), la alternativa es usar javascript o cualquier otra librería de scripts...

    Por sierto, me estafaron con lo de zync.es, es lo peor que e visto! No hay más anunciantes :( Jajaja, que emocionado que estaba cuando me aceptaron o.o

    ResponderEliminar
  10. Alex, qué bueno que te ha gustado :)

    Ascesino96, hay que tener cuidado con esas cuentas, hay muchos fraudes en puerta.

    ResponderEliminar
  11. Que bonito!!!! me encanta como queda!!! y como siempre, muy personalizable!

    Un abrazo!!!

    ResponderEliminar
  12. Si, el Bro tiene razón. Ademas, si va a vender Reviews o enlaces, tenes que hacerlo directamente, ya que si google se entera te penaliza. Códigos como el de Exponsor, por ejemplo, son leidos por el robot de Google y te baja el PR en el acto... sin lugar a duda, quieren ser los únicos que venden publicidad.

    Un abrazo!!!

    ResponderEliminar
  13. Hahaha Claro Potro, Cuenta Con Mis Visitas Y Comentarios Haha, Existen Muchos Blogs Dedicados A Trucos Para Blogger Y WordPress Pero Yo Me Quedo Con Ciudad Blogger ^^ 100% Garantizado

    Saludos!! =]

    ResponderEliminar
  14. brother, igual a mí me gusta cómo queda, me dan ganas de poner todos los trucos, jajaja.

    CяιsтιαиGσиzαlєz, mil gracias, sabes que eres parte de Ciudad Blogger ;)

    ResponderEliminar
  15. potro hola soy yo blogio
    como hago para aprender sobre blogger
    tengo el blog de ayuda blogger
    y quiero crear mis propios codigos
    solo una pregunta
    ¿como?
    espero tu respuesta amigo
    ¡salu2!

    ResponderEliminar
  16. y disculpa amigo..
    por ser copion y no saber nada de nada.. :(
    lo siento mucho espero que me perdones potro..

    ResponderEliminar
  17. Hola Blogio,

    Yo no he dicho nada :)
    Pues no sabría decirte "cómo", más bien sería que analizaras la plantilla mínima parte por parte para entender un poco el funcionamiento de cada pieza y de ahí partir para poder manipularlos.

    Un abrazo y ánimo!

    ResponderEliminar
  18. Graicas potro tu comentario me a echo seguir adelante :D
    Muchas Gracias
    ¡UN ABRAZO!

    ResponderEliminar
  19. Blogio Brother, Pa Delante Con Tu Blog Haha, Mira, Yo Hace Medio Año No Sabia Ni Postear En Blogger Hahaha Ahora Tengo ""Full Blog"", Pero Le Faltan Muchas Cositas (Gente) Hahahaa, Y Fui Aprendiendo Poco A Poco xD Incluso Me Llegaban Invitaciones Para Colaborar En Otros Blogs Hehe, Y Ahora Aparte De Aportar Para Blogs De Blogger, Tambn Lo Hago Para Blogs De WordPress, Solo Es Cuestion De Ánimos, Atención Y De Muchas Horas Pegado Del Monitor De Tu Pc Hahahahah xDDD!

    Saludos!!

    ResponderEliminar
  20. Potro, Te Sabes El Truco Para Hacer Una Barra De Herramientas Como La Que Tiene Www.TrucosFlash.Net? Esa Que Es De Color Rojo Y Está Abajo xD!

    ResponderEliminar
  21. Si, yo también quiero poner todoooo, pero ya me "curé", porque todavía estoy tratando de que cargue mas rápido el blog. Por el momento reduje a la mitad el tiempo, pero falta mucho...

    Un abrazo!!!

    ResponderEliminar
  22. CяιsтιαиGσиzαlєz, no sé cuál barra de herramientas dices, no veo ninguna :S

    bro, es que se vuelve una adicción, en cuanto pones algo nuevo quieres otra cosa y otra y otra. Pero tu página ya se ha aligerado significativamente :)

    ResponderEliminar
  23. Haha Potro, Es Que Quiero Algo Como Esto http://bit.ly/7LJ076, Pero Es Que Eso Anda En Inglés Y Yo De Inglés No Sé Nada u_u. Haber Si Puedes Hacer Un Tuto Sobre Eso, Estaría Genial Bro!! =]

    Saludos!!.

    ResponderEliminar
  24. Voy a hacer el intento primero en el blog de pruebas :D

    Potris ... Me parece que blogger está en mi contra en estos días :(
    Hoy hice tres post (en el blog de negligencias medicas) a las siete de la mañana ... y todavía no actualizó en ningún lado esas entradas (ni en los seguimientos, ni en Facebook, ni en otros directorios que tengo donde captan mi blog por el feed RSS, bueno, en FeedBurner menos que menos, tarda un poco mas, segun el horario que le hayamos puesto)
    Ahora le cambié la hora a una entrada (para probar) y en lugar de las 07:10 le puse 11:20, ... nada. Es lo mismo. Ni aparece.

    Yo tengo seguimientos que me los actualiza a la hora, por ejemplo.

    No se que está pasando my friend, pero asi estamos :(
    (buaaaaaaaaaa)

    Sale besazo pa' Tijuana :D ¡Atajalo !!

    ResponderEliminar
  25. Volví para avisarte que me actualizó el otro blog, (contra el maltrato animal)
    Dice el título y "Hace 9 minutos"
    :O

    y los otros tres???
    Se los tragó la tierra???

    :S ¡Oh my Gooooooooooooood! jajajaja
    Abrazotes :)

    ResponderEliminar
  26. Hola CяιsтιαиGσиzαlєz,

    Se ve lindo el menú pero tendría que probarlo en Blogger para ver cómo se comporta, sobre todo porque leí que en IE no funciona muy bien.
    Con un poco más de tiempo hago las pruebas y si sale todo bien lo publico.

    Saludos.

    ResponderEliminar
  27. Hola María Rosa,

    Que no cunda el pánico, mientras los posts estén publicados en Blogger no hay ningún problema.
    Los servicios que recopilan la información de tu feed para mostrarla en las distintas redes sociales suelen tardar un poco a veces, ya sea por el tráfico alto de información o porque sus servidores estén fallando.
    Te recomiendo leer esta entrada para agilizar el tiempo de actualzación de tus entradas:
    http://ciudadblogger.com/2010/01/acelerar-el-tiempo-de-actualizacion-del.html

    Besos.

    ResponderEliminar
  28. Ok ;) Potris.

    Pero eso es con respecto a los Feed.

    Lo raro eeeeeees, que no lo actualizó en el Escritorio de Blogger, en seguimiento :S
    Y si lo hizo a los pocos minutos con el otro blog.
    Ta're-loco-blogger!!¿?

    Igual, es como vos decís, los post ... están.

    Voy a leer tu post de "acelereinshons" jajajaja ;)
    Bechos

    ResponderEliminar
  29. Es por lo mismo, a veces se saturan sus servidores y tardan en actualizar.
    A mí me pasó lo mismo hace tres días, publiqué un post y Twitter nunca lo actualizó, tuve que hacerlo manualmente, supongo que lo mismo ha de haber sucedido.

    Bechos ;)

    ResponderEliminar
  30. Haha Potro, Internet Explorer Es Un "Asco" Haha Sin Ofender A Quien Diga Lo Contrario xD! Por Eso Me Quedo Con Mozilla Firefox Hehehe.

    Pero Oye Potro Ya Instalé La Barra De Herramientas Que Queria Hueeee (h5), Es Algo Parecido A Lo Del Link Que Te Dejé Hace Un Rato Hehe.

    Mira El Resultado De Mi Barra De Herramientas http://bit.ly/aZT5tN, Solo Hay Que Hacerla A Gusto Propio En Www.Wibiya.Com Y Si Haces Este Tuto, Te Aseguro Que Los Blogs De La Mayoria De Tus Visitantes La Pondran.

    Saludos ;)!

    ResponderEliminar
  31. Concuerdo con lo de Internet Explorer, pero mientras Analytics siga diciendo que la mayoría usa IE tendremos que seguir considerando manejar nuestros blogs para ese navegador.

    Te quedó bien la barra. Ya hay varios tutos por ahí que hablan de cómo ponerla, así que me esperaré a ver si tengo buenos resultados con la otra que sugeriste ;)

    Un abrazo!

    ResponderEliminar
  32. Hahaha Siii, u_u Lamentablemente Analytics Dice Eso, Pero Deberían De Hacer Algo Para Que Internet Explorer Deje De Ser Un "Asco" Siendo El Navegador Más Utilizado.

    Hehe Y Oye!! Harás El Tuto De La Primera Barra Que Sugerí?? Hehe Pues Que Bn Porque Esa Trae Un Truco Especial A Comparación Con La De Wibiya!! ^-^

    Espero El Tuto Con Paciencia Haha, Saludos Bro ;)!!

    ResponderEliminar
  33. Deja que tenga tiempo veo su funciona en Blogger primero ;)

    ResponderEliminar
  34. Hehe En Blogger Si Funciona Bro, Porque Ya He Visto Esa Barra Más El Truco Que Trae En Un Blog Cuya Plataforma Es Blogger, ^^ Hehe Ok Yo Espero xD.

    Ahh Y Tambn Te Aradezco El Haber Seguido A Mi Blog :PP!.

    Un Abrazo Bro!!.

    ResponderEliminar
  35. estoy empezando y he tomado varios tips facilitados por ti, gracias

    ResponderEliminar
  36. Gracias por tus comentarios, me da gusto saber que has podido encontrar temas de tu interés.

    Saludos.

    ResponderEliminar
  37. Pues yo estoy mirando cosillas por aqui para mi blog y ya de paso lo dejo por si lo quereis visitar http://lafuentejuvenilyalgunosmas.blogspot.com/

    gracias por las cosillas que teneis aqui.

    ResponderEliminar
  38. Qué bueno que te ha gustado el contenido de este sitio.
    Saludos!

    ResponderEliminar
  39. muy bueno pero sale descuadrado
    visita mi blog
    bajandopeliculaslatinas.blogspot

    ResponderEliminar
  40. No es que salga descuadrado sino que el mensaje que tienes es muy largo y se corre al siguiente renglón.

    ResponderEliminar
  41. acorte el mendaje pero igua sale decuadrado graxias pare que es la plantilla

    ResponderEliminar
  42. Donde puedo buscar otras fuentes para mi mensaje de Bienvenida?

    ResponderEliminar
  43. En sí sólo serían las fuentes comunes de las páginas web:
    Arial, Arial Black, Book Antiqua, Bookman Old Style, Century Gothic, Courier, Garamond, Georgia, Verdana, Impact, Comic Sans MS

    ResponderEliminar
  44. Encontré un generador de texto con efectos, eso es lo que andaba buscando.

    ResponderEliminar
  45. Wo0w grax! se ve muy lindo! =D agregame pliz!!

    ResponderEliminar
  46. Hola! Sabes como hacer una página de bienvenida, osea, que cuando abran mi blog solo se vea una imagen que yo pondría... sin que se vean los gadgets de los lados solo las páginas(pestañas) en la parte superior... podrías ayudarme con eso?

    ResponderEliminar
  47. En Oloblogger hay un tutorial sobre ello:
    http://oloblogger.blogspot.com/2010/02/otra-pantalla-de-presentacion-facil.html

    ResponderEliminar
  48. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  49. buenas tardes potro
    coloque este efecto pero deseo central las letras ya que me queda mucho espacio al final del mensaje

    ResponderEliminar
  50. y me sale un fondo negro quisiera quitarle el fondo

    ResponderEliminar
    Respuestas
    1. ¿En cuál blog lo has puesto Jesus?
      El color de fondo se quita eliminando esto:
      background:#000;

      Eliminar
  51. SALUDOS POTRO,
    QUERÍA AÑADIR DURANTE ALGÚN TIEMPO UN CARTEL COMO ESTE NEON EN LA CABECERA DE MI BLOG.
    EL CASO ES QUE TENIENDO LA CABECERA DIVIDIDA, Y HABIENDO ESPACIO FÍSICO AL MENOS EN APARIENCIA, QUERÍA SABER PORQUÉ QUEDA EL HTML DESPLAZADO HACIA ABAJO.
    ¿HAY POSIBILIDAD DE UBICARLO MÁS ARRIBA, JUSTO A LA DERECHA DEL TÍTULO DEL BLOG?
    MI BLOG: www.efcondearanda.blogspot.com

    GRACIAS POR TU ATENCIÓN Y TU TIEMPO.

    ResponderEliminar
    Respuestas
    1. Hola jorge, reduce el ancho de la segunda cabecera al 45%
      Saludos.

      Eliminar
  52. Por cierto, este tipo de cartel puede tener enlace a una web?

    Gracias por tu tiempo.
    saludos
    Jorge

    ResponderEliminar
    Respuestas
    1. No lo he intentado, pero tal ves se pueda si encierras todo el código entre <a href="URL del enlace"> y </a>

      Eliminar
  53. ok. Funciona. Yo había probado con esa fórmula copiando de otros gadgets, pero algo hacía mal para que no terminara de enlazar. Ahora sí.

    Gracias.
    Saludos

    Jorge

    ResponderEliminar
  54. Hola Potro, Una pregunta, ¿Porqué me sale un fondo negro en el texto de neon? ¿Como lo puedo quitar?, Espero tu respuesta gracias, Att: Alejandro ;)

    ResponderEliminar
    Respuestas
    1. Hola DjBreaks, habría que ver en cuál blog lo has puesto.

      Eliminar
  55. no logro hacer que se vea, lo copio tal cul esta y nada pasa. me ayudás?

    ResponderEliminar
    Respuestas
    1. Claro joaquin, ¿en cuál blog lo has puesto?

      Eliminar

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
I Ciudad Blogger