Barra cargando en las entradas de Blogger

Existe la posibilidad de agregar una barra de carga mientras una entrada se completa de cargar.

El tutorial es bastante simple y a su vez permite agregarle un poco de animación al blog.

Paso 1: Agregando el script:

Primero, vamos a ''Diseño | Edición HTML'', marcamos ''Expandir plantillas de artilugios'' y buscamos la siguiente línea:

</head>

Sobre esta sección, pegaremos el siguiente código:

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

Paso 2: Agregando la imagen en las entradas:

Ahora buscamos la siguiente línea:

<div class='post-body entry-content'>

Debajo de esta, pegaremos el siguiente código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="imgLOAD" style="text-align:center;">
<img src="URL-IMAGEN" />
</div>
</b:if>

Cambiamos URL-IMAGEN por la dirección de la imagen.


Guardamos los cambios y listo:

Nota:

• Adjunto unas cuántas animaciones para utilizar. Para conocer la URL presiona botón secundario en la imagen y copias la URL.

Animaciones pequeñas:

 

 

Barras grandes: