Add A Animated Loading Effect To Blogger Blog

Every blogger needs that their blog look distinctive among their competitors. If you add this contrivance in to your blog , therefore this contrivance can add a lot of awesomeness animation loading effect to your blog.
This contrivance is extremely straightforward. this can be a lot of or less exit result simply we have a tendency to add within the Microsoft PowerPoint custom animation. once a traveler leave a current page of your journal or click on the link the link it'll build some animation.
To see the live demo simply on my blog itself or click on any link and see the modification.

How To Add A Animated Loading Effect To Blogger Blog ?

• Goto your blogger blog.
• Click on Template >> Edit HTML.
• Search </body> in your blogger template.
• Paste the following code just above </body>.

<style>
#tbt-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/AVvXsEigzayMJ0PiILb18lhkbF5Y8T4_83LAtvJWjw6InNyd25olkwwkVyEUDyLchojhNfQN3Ui6YgtrLNea23J3mJFfabpwp85eWw-ketkTUMydk48QwIjJpjD4sImzWuUdHa16I0065o3LVWQ/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="tbt-page-loader">Loading...</div>');
$(window).on ("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`
    $('#tbt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

After adding this code and save your blog template.

Now you and your visitors see awesome cool animated effect in the blog.

Tweet