Add A Animated Loading Effect To Blogger Blog

Every blogger wants that their blog look unique among their competitors. If you add this widget in to your blog , so this widget will add more awesomeness to your blog.
This widget is very simple. This is more or less exit effect just we add in the Microsoft PowerPoint custom animation. When a visitor leave a current page of your blog or click on the link the link it will make some animation.
To see the live demo just on my blog itself or click on any link and see the change.

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/AVvXsEhMEj2bdkyB-QdLTQnjOunYzZCIzpvKzI8FMe-ITdIPve_k8J68JGl45s2DKLT2fW7LWNUO77waHMshyN4WeBKSLg3Oznw-X8R6iZVwM0q2BD0Jn1nc8IDYUH9oydyppvJJu5vqUwoBz3Y/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.