Home » , , , , , , , , , , , » HOW TO CREATE A PAGE LOADING ANIMATION (FLASH)

0 HOW TO CREATE A PAGE LOADING ANIMATION (FLASH)

Page loading animation is necessary when a blog can not load fast. On page loadind there will be an animation with an explanation that the is still loading that you need to wait for a moment until loading process is complete and loading animation disappear.

This animation is useful to keep your reader to stay and wait until loading process complete and browser your blog.

This helps your visitor/viewers to know that the page that they are viewing is still loading.

Follow the steps below on how you can install it on your own blogs/websites. :)

  • Open Blogger
  • Go to Design
  • Click Edit HTML
  • Tick the Expand Template Widgets
  • Save your template in order for you to have a backup copy, just incase your theme didn't work you can undo it by installing the previous template.
  • Open Notepad create a text file then paste the code below.
var ld=(document.all);
var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
if (ns4)
ld=document.loading;
else if (ns6)
ld=document.getElementById("loading").style;
else if (ie4)
ld=document.all.loading.style;
function init()
{
if(ns4){ld.visibility="hidden";}
else if (ns6||ie4) ld.display="none";
}
  • Then save the file as "preloader.js" without the quotations. :)
  • Next is to upload it on any free file hosting site preferably Google Code cause it is more reliable. :)
  • After uploading, get the URL of the JS file and save it for referrence.
  • Next is to go to Blogger -> Design -> Edit HTML then Press CTRL + F and search for the code below
<body>
  • Then all you have to do is to replace the <body> code with the code below.
<body onLoad='init()'>
<div id='loading' style='position:absolute; width:100% text-align:center;
top:300px;'> <img border='0'
src='pictureurl.gif'></div>
<script src='http://yoururl.googlecode.com/files/preloader.js'
type='text/javascript'>
Notice the RED on the script? Replace the RED line with the URL of of your "preloader.js" file that you uploaded a while ago.

For page loading images/gifs you can use your own flash images or choose the image provided below.




Always preview your blog post to view if the script or codes that you implemented are working perfectly. :)

If the page loads with image then you're good to go!! CONGRATULATIONS!! :)

Well, that all guys!! hope you enjoy another trick by Eazy Blogger Trickz. :D



HAVE A GREAT DAY EVERYONE!!

^_^

0 Response to "HOW TO CREATE A PAGE LOADING ANIMATION (FLASH)"

Post a Comment

back to top