Add jQuery Animated Page Loading Effect to Blogger Blog

Posted by on
Another stylish widget for blogger is the jQuery animated page loading effect for blogger blogs which you can use to enhance your blog's design. The loading effect is seen when loading or reloading any page on the blog. It lets your visitor know when the page is still loading  Below are the steps on  how to add a jQuery animated page loading effect to your blogger blog/website. Here's the demo.

 Also Read:  Scrolling popular post widget for Blogger
                   Square Popular Posts Blogger Widget with Rotating Effect
                   Sliding Recent Post Widget For Blogger

                                                                      

How To Add Stylish Animated Page Reloading Effect To Blogger

  • Go to your  blogger dashboard 
  • Click on 'Template' 
  • Click on 'Edit HTML'
  • Using Ctrl+f  Search for  </head> tag in your template
  • Paste the following code 'above'  </head> (if you don't have it in your template already)


<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>

  • Next, search for the tag </body> in your template.
  • Copy the following code and paste 'above' </body>.

<style>
    #nbl-page-loader {
            position: fixed!important;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 9999;
            background:#000 url('http://1.bp.blogspot.com/-A3x2NInRfqY/UDNYY6nM_1I/AAAAAAAACuc/fya2DbnpJhY/s1600/Page-loading-effect-blogger.gif') no-repeat 50% 30%;
            color: #FFF;
            display: none;
            font: 0/0 a;
            text-shadow: none;
            padding: 1em 1.2em;
            opacity: 0.5;
    }
    </style> 
    <script type='text/javascript'>
    //<![CDATA[
    $(document.body).append('<div id="nbl-page-loader">Loading...</div>');
    $(window).on("beforeunload", function() {
        // ... Show the Animation `.fadeIn()`
        $('#nbl-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
    });
    //]]>
    </script>

  • Save your template.
Also Read:    How to Customize Labels Cloud Gadget In Blogger
                     How to Add 'Link to This Post Widget' For Blogger
                     How to Add Read More Attribution Links to Copied Text in Blogger 

You can edit the page loading effect image by changing the Image URL in the code above.

Do you like this post? Please link back to this article by copying one of the codes below.

URL Of Post:


HTML Link Code:

BB (forum) link code:

Comments

Post a Comment

Please share your views on this topic with Grace Joseph by leaving a comment.