Hace ya bastante tiempo vimos c?mo poner la barra cargando en el blog con un script bastante simple que no hace mas que mostrar una imagen animada mientras el blog se carga. Pero los amantes de jQuery que siempre buscan mayor elegancia en las aplicaciones seguro preferir?n este m�todo.
Se trata de un preloader llamado QueryLoader basado en jQuery y lo que hace es precargar la p?gina, o sea que pone la pantalla negra y muestra una barra con el porcentaje de carga de la p?gina como si se tratara de Shadowbox. Vamos a verlo en acci?n en este blog de pruebas.
Para agregar este preloader en tu blog primero descarga este archivo, descompr?melo y sube el archivo que hay dentro a un hosting.
Luego entra en Dise?o | Edici?n de HTML y despu�s de <head> pega lo siguiente:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='URL del archivo' type='text/javascript'/>
Agrega donde se indica en color rojo la URL del archivo que subiste previamente.
Ahora antes de ]]></b:skin> pega esto:
.QOverlay {
background-color: #000000; /* Color de la pantalla mientras carga */
z-index: 9999;
}
.QLoader {
background-color: #CCCCCC; /* Color de la barra */
height: 10px; /* Grosor de la barra */
}
.QAmt { /* Estilos para los n?meros del porcentaje */
color:#333333;
font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
font-size:40px;
font-weight:bold;
line-height:50px;
height:50px;
width:100px;
margin:-60px 0 0 -50px;
}
Por ?ltimo agrega antes de </body> lo siguiente:
Y eso ser? todo para tener un preloader en el blog con un toque simple y elegante. Algunos estilos podr?n personalizarse donde se indica en color verde
<script type='text/javascript'>
QueryLoader.init();
</script>
Y eso ser? todo para tener un preloader en el blog con un toque simple y elegante. Algunos estilos podr?n personalizarse donde se indica en color verde
IMPORTANTE: No es recomendable usarlo en un blog que ande lento pues si hubiera alg?n elemento que tarde mucho en cargar o una imagen rota entonces la pantalla de precarga permanecer? con determinado porcentaje y no avanzar?, por lo tanto el lector no podr? ver el contenido del blog. Tambi�n es posible que primero se vea un pantallazo del blog y luego aparecer? el preloader, ese es fallo del script que por ahora no tiene soluci?n.
No comments:
Post a Comment