Customize Animated Loading Effect Page For Blogger

 Customize Animated Loading Effect Page For Blogger

 

Every Pro blogger wants to make a dynamic customize blog.In Today post I share a important trick to make customize animated page loading effect for blogger. its helps to make your blog defurent from other blogs.
Just add a bite of code in template section in your blog.  like this picture whenever the visitors will click any link to leave the current page, inspire of the old boring loading it will have animation.

 A live demo can be seen on my blog itself. Just click any link here and you could see the change.
  How to add animated page loading effect
Just add this HTML and CSS code in above </body> edit template  HTML section

===================================================================
<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/AVvXsEh87y7PWTOg9QMVTN75P4nC1lFWZYxWlUlLE2rPiWyPEVMzr0utcIOuJ_AoAzkTeR65eGRRRFGH27a1wG_StpbreAMZJ4AAmyO3-Hax75E7egjlU9FFqgntNnTKVR05-SH4rebs7NyM2yA/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>

===================================================================

Now save your template

if you not have instal jquary plugins please add this working this effect properly

You successfully do this........

Thank You.