Precargar el blog con jQuery



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:
<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
Hay que considerar que no es recomendable usarlo en un blog que tarda mucho en cargar pues de haber algún elemento que tarde mucho (uno de esos gadgets o imágenes que tardan infinidades en cargar) entonces la pantalla de precarga permanecerá y el lector no podrá ver el contenido del blog. Pero si tienes un blog con una velocidad de carga considerablemente buena entonces el script te vendrá muy bien.
Share this movie :

+ comentarios + 2 comentarios

Tu Mejor Amigo
4 de marzo de 2011, 20:40

Bueno Amigoooo GRasiaaa Por Este Gran Post

WWW
4 de marzo de 2011, 20:41

Hey Grasia Estaba Buscando Esto!!!!

Publicar un comentario

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. www.PorTrucos.com - La Web Donde Encuentra To! Sin Gripe Y Sin Virus...! - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger