WordPress Loading Page Trick
Sebetulnya ini hanyalah penjelasan yang lebih panjang dari tutorialnya milik Om Joy (Crazydavinci), tetapi insya Allah lebih mudah dipahami karena akan dibahas satu per satu dengan perlahan. Kalaupun masih menemukan kesulitan, silahkan bertanya melalui Twitter @AaEzha atau berikan komentar dibawah. Untuk previewnya bisa dilihat dari blog ini ataupun dari blog Om Joy.
Adapun yang kita butuhkan hanya 3 komponen saja, antara lain:
- File header.php dari tema yang kita pakai sekarang
- File footer.php dari tema yang kita pakai sekarang
- Kode dibawah ini
[html]<!– Loading Page Script – CrazyDaVinci – http://crazydavinci.net –>
<style type="text/css">
/* add loading image */
body {
background:#4B4B4B url(http://static.iix.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>[/html]
——-
Okeh, langkah pertama buka file header.php nya. Lalu perhatian baris pertama setelah kode <body>. Kalau menemukan potongan kode <div id="page">, maka copy script diatas tadi tepat sebelum tag kode <head>
Adapun jika tidak menemukan potongan kode <div id="page"> setelah <body>, berikut langkah-langkahnya:
- Langkah pertama buka file header.php nya. Lalu pada baris pertama setelah kode <head>, tulis script dibawah ini tepat dibawahnya.
- Kemudian pada baris setelah <body>, tambahkan <div id="loading">.
- Terus buka file footer.php, tambahkan </div> tepat sebelum kode </body>
[html]<!– Loading Page Script – CrazyDaVinci – http://crazydavinci.net –>
<style type="text/css">
/* add loading image */
body {
background:#4B4B4B url(http://static.iix.crazydavinci.net/images/loading.gif) no-repeat fixed center;
}
/* hide loading div */
#loading{
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("#loading","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> [/html]
Ehm, itu seh cuma pemikiran simpel dari ane aja. Klo masih menemukan kesulitan, mari bahas bersama 🙂
Salam ganteng,
Aa
Free Daily Nerd Tutorials 
gan tukeran link yup..
liat disini yah..^^
http://forum.balikita.net/viewtopic.php?id=3790
nice…. ni dia yg di tunggu2
smlm sebenernya udh bisa tapi css ane ngaco , tapi skrg ane coba pakai cara aa :)) btwudh baca koment blm yg tentang www atau non http://www... itu
gambarnya upgrade ya a…
:-bd mantab nii
Okeh, ntar aa update lagi gambarnya bob 🙂
thx for visiting AaEzha.com
i approve it WordPress Loading Page feint | AaEzha van Ilmi – Ikatlah Ilmu dengan Menuliskannya now im your rss reader
makasih gan, tutorialnya mantap.
Masama gan 🙂
moe copas, sekalian share versi blogspot nya ya om Aa 😀
http://p-cbn.blogspot.com/2011/05/loading-page-for-blogspot-wordpress.html
mangga kang di-share bebas 🙂