Cara Membuat Efek Loading Page Pada Website

Hallo sahabat labil ..! , kali ini Info labil akan membahas tentang Cara Membuat Efek Loading Page Pada Website.
  • login blog
  • buka menu rancangan >> edit HTML
  • lalu cari kode </head>
  • dan letakkan kode dibawah ini tepat diatas kode </head>
<!-- Loading Page Script – nophall – http://juniorhtc.blogspot.com -->
<style type="text/css">
 
/* add loading image */
 
body {
 
background:#4B4B4B url(http://static.int.crazydavinci.net/images/loading.gif) no-repeat fixed center;
 
}
 
/* hide page div */
 
#page{
 
display:none;
 
}
 
</style>
 
<script type="text/javascript">
 
function css(classORid,rules){
 
try{
 
var css=document.createElement("style");
 
css.innerHTML=classORid+"{"+rules+"}"
 
document.body.appendChild(css);
 
}
 
catch(e){}
 
try{
 
document.styleSheets[document.styleSheets.length-1].addRule(classORid,rules);
 
}
 
catch(e){}
 
}
 
function loaded(){
 
css("#page","display:block!important");
 
css("body","background:#000 url()");
 
}
 
if(window.addEventListener)window.addEventListener("load",loaded,false);
 
else if(window.attachEvent)window.attachEvent("onload",loaded);
 
else if(document.getElementById)window.onload=loaded;
 
</script>

  • lalu cari kode <body>
  • lalu letakkan kode dibawah ini , dibawah kode <body>
  • <div id="page">
  • cari lagi kode </body>
  • dan taruh kode </div> diatas kode </body>
  • simpan deh...
 untuk gambar Gif nya kalian bisa pilih di bawah ini : 

ajax-loader8ajax-loader
ajax-loader7ajax-loader2

ajax-loader3
ajax-loader9ajax-loader4
ajax-loader10ajax-loader5
ajax-loader12ajax-loader11
ajax-loader14ajax-loader15

Artikel Terkait

 
Copyright © 2011 bubu | Powered by Blogger
Design by christian tatelu | download this template here!