GuidePedia

1

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, inspite 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('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>
---------------------------------------------------------------------------

Now save your template

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

You successfully do this

Post a Comment

  1. This Website is Best Site For "Free Net" Tips And Tricks.
    Also You Can Know Many Kinds Of Tips And Trick For Computer.
    For Many Kinds Of Tutorial You Can Visit This Site.
    Click Here For More details.

    ReplyDelete

 
Top