domingo, 5 de marzo de 2017

Poner efecto "Page Loading - Carga personalizada" a tu blog de blogger

Un nuevo post el día de hoy veremos como colocar el efecto "Page Loading" en tu blog este truco además de sencillo para usarlo, tiene como objetivo sobre poner en tu blog cada que carga alguna página, post o contenido un efecto de 3 puntico cargando mientras todo el contenido está listo, lo cual lo hace interesante.



Podemos ver un Demo en el siguiente blog click a DEMO Abre un artículo de blog demo para ver el efecto:

http://senorjuventud.blogspot.com.co/

Interesante ¿No? para ponerlo en nuestro blog haremos estos cortos pasos.

EL TUTORIAL

1. Bastará con ir a Tema > Editar HTML allí buscamos el código "</body>".

2. Ahora justo encima del código buscado pegamos el siguiente código:
<style>
#abt-page-loader {
        position: fixed!important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        background:#000 url('http://3.bp.blogspot.com/-sW166HTPK4U/UY2kVNdjsFI/AAAAAAAAEHk/fIO-B-mOeCE/s200/load6.gif') no-repeat 50% 30%;
        color: #FFF;
        display: none;
        font: 0/0 a;
        text-shadow: none;
        padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="abt-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`
    $('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
3. Y listo ya quetodo sólo queda guardar y disfrutar el efecto.

Lo que tenemos en color Naranja es el link de la imagen por defecto con el efecto es un .gif ya que lleva movimiento la imagen puedes reemplazar por otra similar.

Es todo nos vemos en un próximo post, 

2 comentarios:

  1. Como puedo hacer para que el efecto dure unos segundos más?, muchas gracias.

    ResponderEliminar
    Respuestas
    1. Hola Anónimo, te contesto este comentario rápidamente:

      Al final de código está la condición delay y un número:

      $('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000)

      Incrementa el dígito para ver que sucede cualquiera de los 3 número que allí salen, pero como tal la idea es que tu sitio cargue rápido no tendría sentido demorarlo un poco más.

      Saludos,

      Eliminar

SÍGUENOS EN: