Add Page Loading Animated Effect In Blogger Template

0
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.
How to add page loading animated gif image effect in blogger template,learn trick about GIF animation image while blog page loads.
Hello Folks,Today in this article we are going to explain you how to display loading image/anim...
SUMMARY

How to add page loading animated gif image effect in blogger template,learn trick about GIF animation image while blog page loads.

You Might Also Like:

We hope this article helped you to learn Add Page Loading Animated Effect In Blogger Template. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "Add Page Loading Animated Effect In Blogger Template" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand