20 Ways To Make $5000+ From Home. Earn Now!

Table of Content

Add Page Loading Animated Effect In Blogger Template

How to add page loading animated gif image effect in blogger template,learn trick about GIF animation image while blog page loads.
How to Add Page Loads Loading Image Effect In Blogger Template
Hello Folks,Today in this article we are going to explain you how to display loading image/animated effect on your blogger website or blog.This tutorial will help you to learn to use any gif animation as loading animation effect.using this feature will improve your website or blog loading experience.

how to generate a loading animation effect

First we need to create or find a matching content or beautiful loading gif image for blogger template.If you are a graphics designer then you can easily create a page loading animation gif image.But if you are not related to graphics then you don't need to worry, Now days there are many websites available over the internet where we can easily get a loading animated image and you can customize it according to your Blogger template. We have mentioned few websites to create gif page load image below,check them out.
  • http://loading.io/
  • http://www.loadinfo.net/
  • http://preloaders.net/
  • http://cssload.net/
  • www.ajaxload.info
  • http://www.chimply.com/Generator#classic-spinner,animatedCircle

How to add animated loading image effect in blogger template

Step 1. Log in to your Blogger Account and Go to your Blogger Dashboard
Step 2. Now Click on -> Template -> Edit HTML->
Step 3. Now Search ]]></b:skin> By Pressing Ctrl+F 
Step 4. Finally Now Copy the below CSS and Paste the CSS above ]]></b:skin>
.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('Image URL') 50% 50% no-repeat rgb(249,249,249);
}

customization:

Change Image URL with your gif image url.

Step 5. Now Search For <body> or <body ....> and add the below tag just below <body> tag.
<div class="loader"></div>
Step 6. Now Search for </head> By Pressing Ctrl+F and copy the below Script and paste it above/before </head>.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
    $(".loader").fadeOut("slow");
})
</script>
Now Save your template..Done !

If your blogger template already contains the above jquery,then you don't need to follow the above step i.e Step 6.Just Skip !
We hope this article helped you to learn How To Add Page Loads Loading Animated Effect In Blogger Template.If you liked this article please Join us on Facebook,Twitter,Google Plus.

1 comment

  1. .loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('Image URL') 50% 50% no-repeat rgb(249,249,249);
    }