-->
Barra cargando en las entradas de Blogger

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:

 




Artículo aleatorio
BuySellAds
BuySellAds
BuySellAds
BuySellAds
BuySellAds
Artículos destacados
Crea texturas y motivos para tu blog con Adobe Photoshop # - Crea texturas y motivos para tu blog con Adobe Photoshop
Añadir CSS a los enlaces según tipo de archivo # - Añadir CSS a los enlaces según tipo de archivo
¡Hemos actualizado el diseño del blog! # - ¡Hemos actualizado el diseño del blog!
Conociendo CSS3 - Animaciones # - Conociendo CSS3 - Animaciones
Thumbs Up and Down en Comentarios de Blogger # - Thumbs Up and Down en Comentarios de Blogger