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:

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpXgIJEM_byp4TTcbPLImLu0ioEUApvyMDmRrDRo3T-njz6zwSKgYFmIFWeVfNrKCxZcki_goaadD3es30bL6azFbQnm-03qSBjIhDZFsKpynZPd4YE0eufK7d1PTJLwr4BjwYjKeb_0s/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 quedó todo 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,