CARGANDO EL BLOG (LOADING)

Este recurso consiste en poner un gif de forma que al cargar ya sea la página principal como cualquier otra, dependiendo de donde coloquemos el gif se muestre una imagen de carga, lo cierto es que cuanto mas ligero sea la carga del blog mejor, claro que esto se consigue optimizando mucho la web o blog. La carga de imágenes relentiza bastante ya que al cargar una página se deben de cargar todas las imágenes, recursos como slides que se crean en páginas externas suelen ser los que mas relentizan la carga ya que se debe de establecer la conexión con la web del cual proceden. Cuidando todos estos aspectos y muchos otros no podemos evitar que tarde algo en cargar la página ya que depende tanto del blog o web como de la conexión a Internet, explorador...
Os voy a enseñar a crear la típica imagen de cargando..., esta se mostrará mientras se carga el blog, una vez cargado la imagen desaparecerá, es un recurso que da un punto mas de calidad y muy simple de crear. Vamos allá!

Primer paso:(Ubicar el Script)

Para ello nos vamos a: Diseño->Edición de HTML aquí buscaremos </head> y pegaremos justamente encima el siguiente código:



<script type='text/javascript'>
window.onload = detectarCarga;
function detectarCarga(){
document.getElementById("imgLOAD").style.display="none";
}
</script>

Ya tenemos el script, guardamos los cambios y listo.

Segundo paso:(Añadir nuestra imagen de carga)

Lo normal será ubicar la imagen en algún lugar de la sidebar, así cualquier página que se carge permitirá ver el efecto, pero también se puede agregar tan solo a una entrada en concreto que será lo menos común. Debo añadir que la imagen de carga normalmente será como mostraré a continuación pero podéis añadir cualquier otro gif que queráis aun que quizás no tenga demasiado sentido.

Para el caso de la sidebar añadiremos un gadget de tipo HTML/JavaScript o bien podemos insertarlo en algún elemento que tengamos ya creado con tal de no saturar la sidebar.
Aquí insertaremos el siguiente código:

<div id='imgLOAD' style="TEXT-ALIGN: center">
<b>Cargando...</b>
<IMG src="URL DE LA IMAGEN">
</div>

Tercer paso:(Personalizar la imagen)

Aquí os facilitaré unas cuantas imágenes para los que no quieran complicarse mucho la vida buscando en otros sitios, hay cientos de estas imagenes de todos los tipos y colores en la red.

Tan solo tendréis que sustituir donde puse URL DE LA IMAGEN en el segundo paso por la dirección donde se encuentra la imagen. Si queréis una de las que mostré anteriormente podéis conseguir la dirección directamente haciendo click con el botón derecho del ratón encima de la imagen y click en copiar ruta del enlace, lo pegamos y listo, si queréis otras imágenes podréis encontrarlas por ejemplo aquí, donde permite personalizar los gifs de carga, descargáis la imagen y la alojáis en algún servidor de imagenes, como por ejemplo este, obtenéis la dirección y la cambiáis por URL DE LA IMAGEN. Guardaremos los cambios y probar a recargar la página F5 por ejemplo.