For a good website first priority we should optimize our template’s
images, minifying style sheets and scripts. But this is required significant
changes on your Blogger template. But most of us don’t want to sacrifice our
template’s design and style. So I think probably you are now thinking about any
alternative solution? Right!!
Why don’t we use a page loading animation which will give
our readers a break with beautiful animation?
What do you think about displaying a page loading gif image while the
page loads gracefully in site’s page background?
Generating a Loading Animation
We can accomplish this task by simple effort. First of all we
have to create or find a beautiful loading gif image. If you are expert in graphics designing then
you can easily create a page loading gif which will be unique. However you don’t
have too much talented or have knowledge about creating animated image. Because
now a day there are many website available over the net where we can easily
generate a loading animated image and customize it according to your Blogger template
color. You can visit below sites and generate your desire one.
- http://preloaders.net/
- http://loading.io/
- http://www.chimply.com/Generator#classic-spinner,animatedCircle
- www.ajaxload.info
- http://www.loadinfo.net/
- http://cssload.net/
There are more site’s available over the net but I found
these 6 is good and easy to use. So generate any loading animation by visiting
those sites. However you can use any
loading image from below whatever you like
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Please save any animated image and upload it in any image hosting site or in Blogger. After that use it in your Blogger template.
Adding Loading Image in Your Blogger Template
I hope you have generated any suitable loading image or
selected from above. And now I will show you how to integrate this gif animated
image in Blogger template. Just go through the below steps-
Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard
Step
2 Click
on -> Template -> Edit HTML->
Step 3 Now
Find the]]></b:skin> By Pressing Ctrl+F (Windows) or CMD+F (Mac)
Step 4 Copy and Paste the below code above]]></b:skin>
Customization
- Replace Image URL HERE with gif image URL.
Step 5 Now again locates opening
body from your Blogger template. The code will be like <body> or <body ..>
Step 6 Add the below div
right below the opening <body>
tag.
<div class="loader"></div>
Step
7 Locate
</head> By Pressing Ctrl+F (Windows) or CMD+F (Mac) and copy the below JavaScript 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>
Note that <script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
is optional. If your Blogger template containing this Jquery file then you don’t
have to use it again.
Step 8 Finally exit from there by clicking on Save template button.
Well done you did it. Now visit your Blog and see the
animated effect. This loading animation will be visible while visit any Blog
post and on Blog landing page.
Have you got any Good loading gif image? You can share
with us in Comment section. Thank you. Happy Blogging.
No comments:
Post a Comment