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 hay comentarios:
Publicar un comentario