lunes, 13 de diciembre de 2010

Luces de Navidad en el blog (sin script)


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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDtDUOYKub0A5EAxoX_aTF0apC6HxtaNQ-X13w_e1J9QYw_b4TVKmNhRcbO1oPet_Vaiy_41OSRSoKfrBGauFdRTlh2jzijKaAl34dVyvH99UJHx-I1nYUjYuQyCTVi1PpYeOkn9w5K_U/);
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.

No hay comentarios:

Publicar un comentario