Luces de Navidad en el blog (sin script)

13 de diciembre de 2010 78 comentarios ,

Hace unas semanas vimos cómo poner unas luces de Navidad en el blog usando un script de Snowy Sites. Lamentablemente cuando se usan muchos scripts la carga del blog puede ser más lenta de lo normal, especialmente si el script depende directamente de otro sitio Web.
Es por eso que vamos a ver cómo poner unas luces de Navidad usando sólo CSS para quienes aprecian la velocidad de una página.

¿Cómo queda? Puedes verlo en este blog de pruebas.

Para colocar estas simpáticas luces de Navidad en el blog sólo sigue estos dos simples y sencillos pasos.

Entra en Diseño | Edición de HTML y antes de ]]></b:skin> pega lo siguiente:
/* Luces de Navidad
----------------------------------------------- */
.luces {
background-image: url(http://lh3.ggpht.com/_dsEG33PDaHw/TQbUXz8FuHI/AAAAAAAAAfI/ujDihPK3ET8/luces.gif);
background-repeat:repeat-x;
height:29px;
width:100%;
position:absolute;
top:0;
left:0;
}
Ahora antes de </body> coloca esto:
<div class='luces'></div>
Y listo, tendrás unas luces de Navidad en tu blog de una manera más ligera que no afectará tanto la carga del blog.
Por defecto las luces se quedarán hasta arriba del blog, pero si quisieras que éstas estén de forma flotante sólo cambia donde dice absolute por fixed y de esa manera las luces se seguirán viendo aun cuando se baje el scroll de la página.


78 comentarios en:

" Luces de Navidad en el blog (sin script) "

  1. Un script tan complejo es reducido a unas simples líneas con CSS, y es mucho más efectiva...

    Muy buena alternativa, saludos! : )

    ResponderEliminar
  2. excelente ! justo lo q necesitaba para mi web ! Saludos Potro !

    ResponderEliminar
  3. Daniel Fernández, completamente de acuerdo.

    Levizito, qué bueno que te ha gustado!

    ResponderEliminar
  4. wow! está genial. El de la nieve también está de pelos y a todas las chicas ke entran al mío les encanta!!! Siempre nos tienes ad-hoc con la temporada, cualkiera ke sea. Eres un lindo, gracias por este post!!!!

    Besote!!!! =*

    ResponderEliminar
  5. No tine que ver con este post pro es excelente lo e las luces. como todo lo del blogs. Mira, necesito ayuda con mi webs: http://www.recodescargas.com.ar/ es que quiero cambiar de color de fuente en los post ya que no se ven bien, pero no encuentro el codigo. me ayudarias? muchas gracias. si necesitas algo decime y te lo doy.

    ResponderEliminar
  6. Estimado Potro... Bravo !! :-D Muchísimas gracias, que pena no puedas atender el blog como quisieras, un abrazo y muchas gracias por tu esfuerzo y dedicación

    ResponderEliminar
  7. Merlina, es que hay que estar al mismo ritmo de las temporadas del año :) Gracias por el besote, otro para ti!

    Jose Alfredo Coronel, busca donde dice #content-wrapper{ y justo después de eso agrega esto: color: #000; ahí puedes cambiar el código del color que desees.

    MaG@S RaDioMuSiC, gracias, parece que ya podré estar de nuevo seguido por aquí :)

    ResponderEliminar
  8. Potro son compatibles con Scriptaculous?? es que no las veo y o bien pueda ser por esto o porque mi plugin de flash player no vaya bien... http://magosradioblog.blogspot.com/

    ResponderEliminar
  9. Es compatible con cualquier plantilla ya que no requiere de ningún script.
    Lo que sucede con tu plantilla es que la navbar está tapando las luces.
    Puedes ponerlas más abajo si gustas, sólo modifica donde dice top:0; por otro valor, por ejemplo top:40px;

    ResponderEliminar
  10. yeahhh!! ahora sí, cuando aprenderé ??? :D un abrazo y mil gracias ;)

    ResponderEliminar
  11. Holaaaa una preguntota, por que cuando entro a mi blog en lugar de que la pagina carge y se quede en la parte de arriba baja automaticamente a la parte de enmedio???

    http://web-zorros-itq.blogspot.com/

    osea carga el encabezado y en seguida es como si bajara con la barra a la parte de la nube de etiquetas?? por que??

    no se si tenga que ver que tenia el codigo de las luces y la nieve(las codigos anteriores que publicaste) y cuando actualize a los nuevos codigos de luces y nieve inicio a pasar eso... otra cosa ya los borre para ver si era eso pero aun sigue pasando, que puede ser?

    de antemano muchas gracias :D

    ResponderEliminar
  12. :S de nuevo yoo,,, con el problema que mencione anteriormente creo es por el navegador :S ya que en google chrome no pasa eso :S

    ResponderEliminar
  13. Hola potro necesito una pequeña ayuda,quisiera saber como se hace este menu entra en: solowwe.com en ese blog hay un menu en la parte superior con varios canales de TV,tiene efecto deslizante quisiera saber como se hace gracias

    ResponderEliminar
  14. wueeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeena weon gracias

    ResponderEliminar
  15. Indestructible, seguramente es tu navegador, he entrado desde las últimas versiones de Chrome, Internet Explorer y Mozilla, y en ninguno tuvo ese problema.

    ๖ۣۜCESAR๖ۣۜ™ (Cesar Jericho), con un carrusel de imágenes puedes hacerse, por ejemplo con este, sólo que sin agregar el efecto de ThickBox para que en lugar de que las imágenes se abran en ventanas modales puedas meter un enlace común y corriente.

    ResponderEliminar
  16. Dejo en esa entrada mi comentario, como podría dejarlo en cualquier otra de su excelente página. Vengo a agradecer la ayuda que encontré acá para solucionar el problema de mi lista de seguidores que había desaparecido. No conseguí el efecto I-Phone (que era hermoso...) pero logré recuperar el gadget.
    Tomé la libertad de llevarme su banner y URL para divulgar en mis blogs bajo el título "Se recomienda".
    La suya es una de las presencias más útiles que jamás he encontrado en la red virtual.
    Con respeto y admiración me curvo en una venia ante sus conocimientos y la generosidad con que los comparte. Desde Lisboa, un saludo cordial y un abrazo afectuoso.
    Tania Alegria

    ResponderEliminar
  17. O_O ojú!! Potro esto si que es un halago... lo de Tania :D

    ResponderEliminar
  18. Ante todo estupenda página , agradecer la ayuda prestada a ésta que se inicia lentamente en esto de los blogs.

    Mi pregunta es., si hay alguna manera de que aparezcan en el lateral izquierdo del blog y la forma de bajar la velocidad de las luces.

    Y ya de paso, que pasen buenas navidades. saludos.

    ResponderEliminar
  19. :S Si creo, si es el navegador :S

    gracias :D

    ResponderEliminar
  20. MCarlitooH2, de naaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaada weon :D

    Tania Alegria, te agradezco enormemente tu comentario, qué gusto que estés encontrando útil la información de este sitio que tiene como único objetivo compartir. ¡Saludos hasta Lisboa!

    MaG@S RaDioMuSiC, verdaderamente lo es :D

    tata, las luces son una imagen en formato GIF, la única forma de controlar la velocidad de ellas es editando la imagen con algún programa que permita manipular este tipo de formatos de imagen. Felices fiestas!

    ResponderEliminar
  21. Muy buen! Lo puse en mi blog. Potro como hago cuando subo una imagen gif a blogger para que no pierda el movimiento? :S

    ResponderEliminar
  22. Hola Potro! segui tus indicaciones y también cambie el valor top:0 por 40px (probe con varios valores) pero aún así no se ven las luces en mi blog... agradeceria mucho tu ayuda.
    http://armonizandotuvida.blogspot.com
    Saludos, que estes bien!

    ResponderEliminar
  23. Pozo+10™, subela directo desde PicasaWeb y desde ahí consigue su URL.

    ResponderEliminar
  24. Siria Grandet., en tu caso el problema parece ser que es porque agregaste el código "encima" del de arriba, lo tienes así:

    .rssbox {
    color: #ccc;
    font-size: 100%;
    /* Luces de Navidad
    ----------------------------------------------- */
    .luces {
    background-image: url(http://lh3.ggpht.com/_dsEG33PDaHw/TQbUXz8FuHI/AAAAAAAAAfI/ujDihPK3ET8/luces.gif);
    background-repeat:repeat-x;
    height:29px;
    width:100%;
    position:absolute;
    top:40px;
    left:0;
    }
    }

    Y debe ser así:

    .rssbox {
    color: #ccc;
    font-size: 100%;
    }

    /* Luces de Navidad
    ----------------------------------------------- */
    .luces {
    background-image: url(http://lh3.ggpht.com/_dsEG33PDaHw/TQbUXz8FuHI/AAAAAAAAAfI/ujDihPK3ET8/luces.gif);
    background-repeat:repeat-x;
    height:29px;
    width:100%;
    position:absolute;
    top:40px;
    left:0;
    }

    ¡Saludos!

    ResponderEliminar
  25. Hola Potro, yo también había notado que ralentizaba mucho la carga de la página.
    Ahora lo he cambiado y funciona muy bien.
    Aprovecho para felicitarte las navidades y para darte las gracias por tantas cosas que aprovecho para poner en mi blog gracias a tus indicaciones.
    Un saludo y felicidades por tu blog y por tu ayuda.

    ResponderEliminar
  26. Un millon de gracias Potro. ahi logre corregir el color de fuente de los post. sos un genio!!! =D

    ResponderEliminar
  27. GRACIAS, LAMENTABLEMENTE ESAS SERAN LAS UNICAS LUCES QUE VERE EN NAVIDAD, =(

    ResponderEliminar
  28. Txolarte, muchas gracias, felices fiestas también para ti y mis mejores deseos!

    Jose Alfredo Corone, qué bueno que ya está todo bien :)

    nEjO, ¡ánimo compa! recuerda que siempre habrá tiempos mejores.

    ResponderEliminar
  29. Potro. Gracias por toda tu generosidad. Me he suplido de más de uno de tus consejos y no te lo he agradecido. ¡FELIZ NAVIDAD!

    ResponderEliminar
  30. Hola potro como se hace el efecto las entradas deslizantes como las tiene :
    http://cyberbloggero.com/
    las entradas q tienen de primeras en http://cyberbloggero.com/ como se logra ese efecto?

    ResponderEliminar
  31. Dorian Villa S., gracias por tu comentario e igualmente... ¡Feliz Navidad!

    ๖ۣۜCESAR๖ۣۜ™ (Cesar Jericho), me parece que su plantilla ya traía ese slider, pero quizá este te sea útil.

    ResponderEliminar
  32. Hola Potro:

    Te comento que adapté el css con otras luces de manera que rodearan el marco exterior de mi blog de pruebas, para después implementarlo en mis otros blogs; no se mucho de css y mi problema es que quiero que las luces de la izquierda y la derecha queden pegadas al marco de la plantilla y no se redimensionen al cambiar la resolucion de la pantalla como sucede cuando se aprietan las teclas "control" y "+"; además con explorer se vuelve un desastre lo que no sucede con los otros navegadores.

    De seguro puedes mejorar el css para adaptarlo a cualquier blog y navegador.(Tu eres el "Master" en esos menesteres) XD.

    Por otra parte, si lo logras, quedas en libertad de compartir el css con los demás blogeros, con la condicion que alojen los gifs en el alojamiento que cada uno use; esto lo digo para que no me quiten ancho de banda. Te dejo la url de mi blog de pruebas para que veas de que te hablo:

    http://elhijodedonjoseblogdepruebas.blogspot.com/

    Te doy las gracias de antemano y quedo muy agradecido por toda la ayuda que nos das de manera desinteresada.

    Si no fuera por El Potro, Vagabundia y Rosa mis blogs serían un desastre XD.

    Feliz navidad y lo mejor para el año venidero te (les) desea tu (su) amigo: Luis.

    ResponderEliminar
  33. es muy interesante, pero les recomiendo que descarguen la imagen Gif http://lh3.ggpht.com/_dsEG33PDaHw/TQbUXz8FuHI/AAAAAAAAAfI/ujDihPK3ET8/luces.gif la suban a su sitio o blog y pongan la nueva direccion en el codigo. con esto solo ustedes haran uso de la imagen.

    Ya que si mucha gente usa esa misma imagen se podria volver lento a la hora de cargar la imagen gif.

    ResponderEliminar
  34. Luis, muchas gracias por tu comentario; sé cómo podría hacerse de la forma que deseas si se tratara de una plantilla clásica (de las que tenía antes Blogger), pero en las plantillas nuevas es todo otra historia pues la estructura es completamente distinta, y ahí no veo el modo qué pueda hacerse :(

    henry Jason, la imagen está alojada en Blogger y aunque Blogger nos ofrece banda ancha ilimitada siempre es recomendable hacerlo como dices por cuestiones de seguridad ;)

    ResponderEliminar
  35. Upss! Mil Gracias!! Qué hariamos sin tu ayuda?!
    Un abrazo.

    ResponderEliminar
  36. Potro, entonces lo que has comentado en la entrada 36 es para todo? digo para la nieve, las estrellas del cursor...etc...porque me alegro de no quitar las suscripciones, así aprendo cosas que si no las ves de esta manera sería complicado, gracias a ambos en este caso a Henry y a tí Potro

    ResponderEliminar
  37. muchisimas gracias compa, con tal de darle un aspecto navideño al blog XD

    ResponderEliminar
  38. potro una pregunta y si solo lo quiero poner en la entrda principal asi como lo tienes tu, cual seria el codigo.

    he tratado de hacerlo pero me quedan un poco separado las imagenes gif.

    debe ser un codigo simple en html.... pero estoy empezando en esto y me cuesta un poco.

    ResponderEliminar
  39. MaG@S RaDioMuSiC, claro, siempre que sea posible hay que tener alojado todo en un hosting propio para no depender de los demás, pero como tampoco se puede depender de un hosting también hay que tener un respaldo de todo en la computadora.

    Alienware y CRNDXA, por nada :)

    henry Jason, yo no lo puse en la portada, sólo puse una imagen de ejemplo en la entrada, cuando ésta se vuelva antigua dejará de mostrarse en la portada.

    ResponderEliminar
  40. Entonces Potro, diculpa mi ignorancia, como hago para guardar el script de las estrellas por ejemplo? o de las estrellitas del cursor? lo guardo como? y subirlo a hotfile o alguno de estos no?...

    ResponderEliminar
  41. Eso depende de qué script sea, en el caso del del cursor con estrellas no es necesario pues el script no hace algún llamado a algún servidor, ese se instala directo en la plantilla.
    De cualquier forma en esta entrada podrás ver cómo alojar scripts en la plantilla:

    http://ciudadblogger.com/2010/02/como-alojar-scripts-en-la-plantilla.html

    ResponderEliminar
  42. Hola Potro
    He seguido tus instrucciones y no funciona en mi blog las Luces...
    Recurro a tu ayuda Gracias.
    RauloCriollo

    ResponderEliminar
  43. Gracias Potro ;) que pases un feliz fin de semana

    ResponderEliminar
  44. Lo mismo que te dije en la otra entrada, revisa bien que estés siguiendo los pasos tal como se indica.

    ResponderEliminar
  45. Hola hace un par de semanas puse las luces y un buen día desaparecierón, ahora no puedo hacer uso de la barra de herramientas del blog. No se como ha pasado ni como quitar el script de las luces.
    Muchas gracias y feliz Navidad

    ResponderEliminar
  46. Hola de nuevo, decir que ya lo he solucionado cambiando el diseño de la plantilla.

    ResponderEliminar
  47. ¡Genial,Potro! Justo lo que buscaba,fijate que yo las puse al principio y no estaban,pero hasta ahora,no me habia fijado en que la barra de navegación lo tapaba!Todo era cosa de eliminar la bendita barra de navegación,¿Cómo? Pues yendo a diseño > Edición de Html y buscar este código:
    Blogger Template Style
    Name: Simple
    Designer: Josh Peterson
    URL: www.noaesthetic.com
    ----------------------------------------------- */
    Y debajo de la línea poner esto:
    #navbar-iframe {
    display: none !important;
    }
    Luego,¡A contemplar mis bonitas luces! Muchas gracias,tus tutoriales mejoran mi blog,y cuando meto la pata,casi siempre(me la paso descargando el html de mi blog XD)lo arreglo y me ayuda a mejorar :),adios.

    ResponderEliminar
  48. Hola Potro ... aplicandonos ya algo de adornos navideños ;-) un abrazo y graciassssssss

    ResponderEliminar
  49. Excelente MaGoS, a empezar a decorar para estas fiestas que se aproximan :)

    ResponderEliminar
  50. hola potro ps mira no me funciona esto no se porque, no tengo q expandir la plantilla verdad?? y va antes o despues de los codigos q se buscan ?? yo lo pongo arriba de los codigos q se tiene q buscar

    ResponderEliminar
  51. No se tienen que expandir los artilugios, y se ponen tal como se indica en la entrada. ¿En cuál blog lo has puesto?
    Quizá es un problema en el primer código, me refiero a que pudiste haber eliminado algo sin darte cuenta al poner el primer código.

    ResponderEliminar
  52. a ps lo puse en este http://paraisodelcelularmp4.blogspot.com ps quiien sabe lo ise tal y como indica y no sale de todos modos tengo los copos de nieve q son sificiente gracias

    ResponderEliminar
  53. No veo que tengas puestos los códigos en ese blog, y sin verlos puestos no puedo saber dónde estaba el error.

    ResponderEliminar
  54. Buscando di con esta entrada y ya puse en un blogg las luces ahora estoy buscando un arbolito para ponerlo al costado en un blogg. Saludos Potro

    ResponderEliminar
  55. gracias Potro..................Feliz Navidad

    ResponderEliminar
  56. Hola Potro!
    Aunque el año pasado no adorné mi blog para estas fiestas, ahora sí me animé a darle un pequeño toque navideño con este truco.
    Lo puse en tres de mis blogs, solo que con distintos gifs animados en cada uno, ajustándole el height, según fuera necesario.
    Fíjate, si gustas.
    Muchas gracias por el truco!

    ResponderEliminar
  57. Hola Vicky,

    Qué gusto que este año te has decidido a darle un toque navideño al blog, yo también ando con la intención de poner algo pero todavía no me decido.

    Que tengas buen inicio de semana :)

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

    ResponderEliminar
  59. Hola

    Me gustaria saber si hay una forma de colocar las luces en forma vertical

    Gracias

    ResponderEliminar
  60. Hola Andrés, sólo si tuvieras una imagen de las luces en forma vertical. El metodo sería el mismo excepto con un pequeño cambio, pero se necesita que la imagen de las luces ya venga en vertical.

    ResponderEliminar
  61. Hola, Potro!
    Como me había suscrito a los comentarios, resulta que ahora veo que Andrés quiere un gif vertical de luces. Aquí hay más de 30 gifs animados de luces, entre los cuales hay solo uno que es vertical. Ojalá y le sirva a Andrés o a cualquier otro:
    http://gifs-cristianos.blogspot.com/2011/12/gifs-animados-de-navidad-3-luces.html
    Solo que se necesitarían tus indicaciones para saber cómo se hace para ponerlo cuando es vertical.
    (Disculpa que el link sea de uno de mis blogs - lo abrí hace unos días. - No es mi intención dejar spam, sino solo compartir esta información, por si le pudiera ser útil a alguien).
    Gracias y saludos!

    ResponderEliminar
  62. Ahhh qué linda Vicky, muchas gracias por las luces que nos compartes.
    Hasta haría una entrada con varias de ellas si me lo permites (y si me alcanza el tiempo).
    Pero sino, ojalá que a Andrés o alguien más pueda verlo, seguro que les será de utilidad.

    De nuevo muchos gracias :)

    ResponderEliminar
  63. Hola Potro!
    Por supuesto que puedes hacer una entrada con todas las luces que quieras; todas están a la orden. Tengo ahora más de 50 modelos. Y a propósito, agregué otro gif vertical más. Bueno, es el mismo, pero más pequeño.
    Es más, en este sitio GIFmagic (http://www.gifmagic.com/) se pueden editar fácilmente los gifs animados, girándolos, cambiándolos de tamaño, de color, recortándolos, poniéndole efectos e incluso, desmenuzarlos cuadro por cuadro y editar cada uno.
    Quizás ya conozcas ese sitio, pero si no, ojalá te sea muy útil. Allí he modificado ya bastantes gifs animados a mi gusto. Incluso estoy pensando hacer una entrada sobre ese sitio, para que las personas puedan cambiar a su gusto cualquier gif que deseen.
    Y a propósito, me tomé la libertad de poner en mi entrada de los gifs de luces un link hacia esta entrada tuya, como guía para instalar las luces navideñas.
    Saludos y gracias por todo!

    ResponderEliminar
  64. Hola Vicky,

    No conocía el sitio pero es un excelente tip.
    Teniendo tu consentimiento entonces veré si mañana mismo puedo preparar la entrada :)
    Gracias de nuevo y gracias también por el enlace.

    Saludos!

    ResponderEliminar
  65. hola yo otra vez me gustaría saber ya que viene navidad y tengo un blog de musica, como puedo crear una ventana pop up.
    Mi intencion esque cuando la gente entre en la Pagina Principal les salga una ventana con un video (en este caso con la cancion de navidad) y que tenga la opcion de quitar.

    ResponderEliminar
  66. Hola Reno,

    Una forma elegante de hacerlo es con Shadowbox:
    http://ciudadblogger.com/2011/05/abrir-ventana-al-cargar-el-blog-con.html

    ResponderEliminar
  67. Aplique las luces. Gracias fue muy fácil con la ayuda de tu blog.

    ResponderEliminar

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