21 Unique Loading Effect Styles! Add to Blogger

We always want to look our blogs more attractive and more professional from others so we always used different methods, templates, gadgets etc. Today we are introducing animated page loading effect for blogger blogs. When our visitors click any link on our blog then an animated loading screen will show and automatically carry the visitor to the clicked link. This is a great way to impress our visitors and attract them to visit our blog pages more times.

If you have seen Google Dynamics View Theme for Blogger, then you might be aware of the fact that before the whole template gets exposed a Small Jquery loading ICON appears that literally stoles our all attention. For Example, you are thinking to play a PC game so before you could start playing you have to go through LOADING part. Similarly, we will insert a tremendous Jquery Loading Effect to our BlogSpot Blog so our visitors won’t see the images or content getting load instead we will show them a cute Jquery loading page that would literally amuse them.

Our Recommended Blogger Widgets

1. WordPress Like Floating Social Sharing Widget for Blogger with Counter.
2. AllInOne Admin Box Widget with Social buttons and Subscription Box.
3. Add Sticky Notification Bar To Blogger with Show/Hide Button.
4. Stylish Contact Form For Blogger! Add to Static Page, Responsive & Pro Version.
5. Cute & Stylish Email Popup Subscription Widget.

There are many way to create loading effect ,in this post ,we want to introduce the easiest way, here are some ideas and inspiration of loading effects that you can apply on your web design. Lets try how to install these effects to your blogger blog.

Note: Before doing Any Customization in your Blogger Template, must download a backup copy of your template.

How To Add Loading Effect On Blogger?

• Go To Blogger >> Template >> Edit HTML.
• Now Search for </head> tag by pressing CTRL+F OR CMD+F.
• Copy the code below and paste it just above of </head> tag.

<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js’ type=’text/javascript’/>

Note: If Jquery is Already added in your Template then skip above step. Because if jQuery is more than one would slow down loading speed.

• Now, Again Search for ]]></b:skin> tag and paste below lines just above of it.

     #page-loader {
    position:fixed !important;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:9999999;
    background:#FFFFFF url(‘URL Here‘) no-repeat 50% 50%;

    padding:1em 1.2em;
    display:none;
    }

Note: Before Adding the JavaScript Code inside your blogger template, First change Above URL Here with one of Image URL from below. Add those link which you want to add.

Blogger Loading Effect Style1]

http://3.bp.blogspot.com/-99_s0XfLTt0/UQaikh3bSMI/AAAAAAAAFOU/BuKqG0mh0eY/s1600/loading4.gif

Blogger Loading Effect Style2]

http://1.bp.blogspot.com/-W9bm3Oc6WzA/UQaik9ql4AI/AAAAAAAAFOg/3fyDf9Agbso/s1600/loading5.gif

Blogger Loading Effect Style3]

http://1.bp.blogspot.com/-udgAVO3FySQ/UQailMH35aI/AAAAAAAAFOo/JD6vDePg9OU/s1600/loading6.gif

Blogger Loading Effect Style4]

http://2.bp.blogspot.com/-yz54Aj8Fp1s/UQailmVa8BI/AAAAAAAAFPA/LT0KOGY-_lk/s1600/loading8.gif

Blogger Loading Effect Style5]

http://3.bp.blogspot.com/-eeiu8xL2Qls/UQaimEebl4I/AAAAAAAAFO8/hSK_kq7C8Po/s1600/loading9.gif

Blogger Loading Effect Style6]

http://3.bp.blogspot.com/-bWMOJ7ywzjg/UQaij1cSLiI/AAAAAAAAFOM/Nrdgh1W6hys/s1600/loading10.gif

Blogger Loading Effect Style7]

https://lh4.googleusercontent.com/-1nnz_q-zdlE/U7nQPsC7zvI/AAAAAAAAEDU/a3A-LG1mM0I/s128-no/Loading1.gif

Blogger Loading Effect Style8]

https://mybloggerguides.com/wp-content/uploads/2016/07/Loading2.gif

Blogger Loading Effect Style9]

https://mybloggerguides.com/wp-content/uploads/2016/07/Loading3.gif

Blogger Loading Effect Style10]

https://mybloggerguides.com/wp-content/uploads/2016/07/Loading4.gif

Blogger Loading Effect Style11]

https://mybloggerguides.com/wp-content/uploads/2016/07/Loading5.gif

Blogger Loading Effect Style12]

https://mybloggerguides.com/wp-content/uploads/2016/07/Loading6.gif

Blogger Loading Effect Style13]

https://mybloggerguides.com/wp-content/uploads/2016/07/Loading7.gif

Blogger Loading Effect Style14]

https://mybloggerguides.com/wp-content/uploads/2016/07/Loading8.gif

Blogger Loading Effect Style15]

https://mybloggerguides.com/wp-content/uploads/2016/07/Loading9.gif

Blogger Loading Effect Style16]

https://mybloggerguides.com/wp-content/uploads/2016/07/MBG-loading-16.gif

Blogger Loading Effect Style17]

https://mybloggerguides.com/wp-content/uploads/2016/07/MBG-loading-17.gif

Blogger Loading Effect Style18]

https://mybloggerguides.com/wp-content/uploads/2016/07/MBG-Loading-18.gif

Blogger Loading Effect Style19]

https://mybloggerguides.com/wp-content/uploads/2016/07/MBG-Loading-19.gif

Blogger Loading Effect Style20]

https://mybloggerguides.com/wp-content/uploads/2016/07/MBG-loading-20.gif

Blogger Loading Effect Style21]

https://mybloggerguides.com/wp-content/uploads/2016/07/MBG-Loading-21.gif

• Now, Again search for </body> tag and paste below jQuery code above of </body>  tag.

     <script type=’text/javascript’>
    //<![CDATA[
    $(document.body).append(‘<div id=”page-loader”></div>’);
    $(window).on(“beforeunload”, function() {
        $(‘#page-loader’).fadeIn(1000).delay(6000).fadeOut(1000);
    });
    //]]>
    </script>

• Thta’s it. You are done.
• Now open your Blog and see it live on your Blogger Blog.