Tutoriales Sobre Blogger: Crear efecto de carga de página para Blogspot

Para que el sitio sea más llamativo, cuando la página se carga lentamente en lugar de mostrar agujeros blancos en la web. mostraremos una animación en formato gif o svg.

Comencemos:

• Vamos a Blogger>> Plantilla>> Edicion HTML
• Buscamos la siguiente linea (Ctrol + F)   </body>
• Pegamos el siguiente script justo despues de  </body>

<style type='text/css'>
.carga {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10000000;
background: url('https://loading.io/spinners/curve-bars/index.curved-bar-spinner.svg') center no-repeat #fff;
}
</style>
<div class='carga'></div>
<script>//<![CDATA[
$(window).on('load',function(){
$('.carga').fadeOut(1000);
})
//]]></script>

• Guarda los cambios y pulsa F5 para ver los resultados

En el css hay una extensión .svg del enlace de animación, puedo reemplazarlo con gif. Pero las fotos deben tener un tamaño de 150x150 o menor.

.carga {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10000000;
background: url('URL de la imagen') center no-repeat #fff;
}

Aquí compartiré para una página con más de 100 imágenes .svg imágenes. Puede usar F12 para obtener enlaces de imágenes y usarlo para su web