z diseño: cómo hacer una precarga para Blogger

viernes, 6 de marzo de 2009

cómo hacer una precarga para Blogger


A veces los blogs tienen demasiados widgets, imagenes y elementos y tarda mucho en cargar, este código mostrará un "loader" o "cargador" hasta que todo el blog se haya cargado completamente.

cargando blog...

PASOS:
Lo primero que haremos es HACER UNA COPIA DE SEGURIDAD DE TU PLANTILLA:
Ir a Diseño ----> Edición de HTML y hacer click en Descargar plantilla completa para poder restaurarla si algo sale mal.

leer más

luego buscamos </head> y justo antes colocamos el siguiente codigo:

<!-- Inicia Precargador -->
<script type='text/javascript'>
window.onload = precargar;
function precargar() {
document.getElementById("imgLOAD").style.display="none";
}
</script>
<!-- Finaliza Precargador-->

Guardamos la plantilla y pasamos a l siguiente paso.

Vamos a crear una imagen para nuestro cargador, para ello hay varios sitios que generan animaciones .gif que nos serán utiles en las que puedes el tipo, color y color de fondo del cargador, por elemplo:

http://loadinfo.net/
http://www.ajaxload.info/

una vez que descargamos el .gif en nuestra computadora, lo subimos a a algún servidor por ejemplo, skydrive, picasa o photobucket, y obtenemos ahi la url de la imagen que luego usaremos en el siguiente paso.

volvemos a nuestro blog, en Diseño ----> Elementos de página, añadimos un gadget HTML/Javascript y en el pegamos la siguiente linea de código:

<div id="imgLOAD" style="text-align:center;">Cargando<img src="url de la imagen"/></div>

reemplazamos -url de la imagen- (dejando las comillas) por la dirección de la imagen que usaremos como cargador, podemos cambiar la palabra -Cargando- por la que querramos, guardamos y listo.

No hay comentarios: