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>Now Save your template..Done !
<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
})
</script>
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.