Te explico cómo añadir una imagen cargando la página web/blog también conocido como preloader/precargar/loading. Y no será necesario usar de ningún plugin, funciona muy bien en Blogger y WordPress.
Hola, soy Gabriela de peengler.com. A continuación te voy a enseñar cómo aplicar el código del preloader en tu sitio.
Sin más que decir ¡empecemos!
Clic en la imagen para ver el vídeo ↑ en YouTube
Un ‘preloader’ tiene como objetivo entretener a tus visitantes mientras se cargan todos los elementos de tu sitio. Y puede que mejore la experiencia del usuario al menos que se tarde demasiado tu blog en cargar. Eso sería un fastidio, en ese caso intenta de mejorar la carga y después aplicarías este efecto.
Para que se muestre tu imagen o gif debes buscar <body> y agrega el siguiente código abajo de este:
<div class='body__preloader'>
<div id='loading'> </div>
</div>
Si usas wordpress, aplica dentro de tu hoja de estilos lo siguiente:
Si usas Blogger Busca ]]></b:skin> y arriba de este pega lo siguiente:
.body__preloader{position:fixed;z-index:999999999999999999999;width:100%;height:100%;left:0;top:0;background-color:#fff;-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;opacity:1;visibility:visible}
.body__preloader.loaded{opacity:0;visibility:hidden;z-index:-2}
#loading{display:block;position:relative;z-index:1001;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;background:url(https://www.peengler.com/wp-content/uploads/blogger-gif.gif) no-repeat center center;background-size:60%;}
Para que funcione la imagen cargando la página web/blog debes agregar arriba del </body> lo siguiente:
<script>
$(window).bind("load",function () {
$('.body__preloader').addClass("loaded");
})
</script>
Guardas los cambios y listo.
Si no te llega funcionar, es porque en tu plantilla falta agregar el jquery
<script crossorigin='anonymous' integrity='sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=' src='https://code.jquery.com/jquery-3.6.0.min.js'/>
Puedes usar cualquiera de estas imágenes (gif) cargando/loading en tu sitio.
Espero que te funcione el efecto de la imagen cargando en tu sitio. La verdad es que se ve bastante bien este truco en el blog. Recuerda que puedes ver el vídeo tutorial Cómo hacer el EFECTO CARGANDO PÁGINA en el Blog
¿Te gusto el contenido? Deja tu opinión en los comentarios.
Sígueme en Youtube🔥
Aprende a crear páginas web con HTML, CSS y Javascript.
Gabriela Laya
Me gusta todo lo relacionadaoa la creación de sitios web ya sea, usando código "HTML, CSS y JS" o usando un constructor "Elementor"