Add Page Loading Effect in Blogger Blogs with jQuery

After a longtime we want to share a great and useful template customization article on All Blog Things for blogger blogs. This is a page loading effect with jQuery and it is also a animated page loader. You can make customization in it for better use. As you can see on Google Dynamic Views Templates for blogspot blogs. A Page loading effect appears before loading content. That is what we want to show you "How you can add a lazy page loading effect in your blogger blog with your own choice of loading image".

You might got my point! NO? read below and try it, than tell me what are you thinking about this amazing and crazy trick. First read about features of this loader.

Features of Page Loading Effects

1. It will don't ruin your blog's SEO. Because! This is a SEO friendly plugin with no first time appearing.
2. It comes with easy editing. Means no encrypted coding so you can change loader image etc.
3. It is a cross-browser plugin. It means this will work on all internet browsers.
4. It will make your bounce rate at low rate. Because your visitor will visit your blog again and again "Surely"
5. It will detect devices, so you don't have to worry about mobiles visitors.

How to Add Loading Effects in Blogger?

Here's my fastest tutorial for adding laziest page loader in blogger blogs. Do the following steps accordingly and get a boost of pro-vines on your blog.

1. Go to your Blogger dashboard select your desired blog
2. Navigate to Template and than click on Edit HTML button
3. Click anywhere in coding and press Ctrl + F a search bar will appear
4. Now search </head> tag in your template and just above it paste below line of coding

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

5. Now search for </body> tag and above/before it paste below coding.

<style>
    #ABT-Page-Loding-Effect {
            position: fixed!important;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 9999;
            background:#000000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg48-JTAIqbiKu9juUH5K6WoPJnxhzi2u8nHk9ZkzubjHKnQAqEKmBJ5vbcBgzhtViuhKUXWu4TW1IAru72OEt7eMxoDK4I8gmYEr3OQs5CJBXmRRnbbjy2UKQR58Ju5h-idv0RihZHXLpE/s1600/Custom-loader-ABT.gif') no-repeat 51% 31%;
            color: #FFFFFF;
            display: none;
            font: 0/0 a;
            text-shadow: none;
            padding: 1.0em 1.3em;
            opacity: 0.5;}

    </style>
    <script type='text/javascript'>
    //<![CDATA[
    $(document.body).append('<div id="ABT-Page-Loding-Effect">Loading...</div>');
    $(window).on("beforeunload", function() {
        // ... Show the Animation `.fadeIn()`
        $('#ABT-Page-Loding-Effect').fadeIn(1000).delay(6000).fadeOut(1000);
    });
    //]]>
    </script>

Customizations: You can customize it as any way you want. You can change loader image by replacing Bold link from above coding. If your loading effect not appears on your blog than try to avoid 4th step.

• Freebie: Get 10+ Page loading effect Images and try them on your blog free of cost. Download Now

Final words

This is our first and final page loading effect article. Hope you have enjoyed. Keep blogging and support us we will do amazing things in blogging era.