Tidak ingin menghampakan hajat x-po shop dan shaufiq maka penulis akan membuat tutorial mengenai page loading beranimasi.Sebelum menjalani tutorial ini adalah lebih baik anda review dahulu posting pasang loading bergambar.Bukan apa, agar anda lebih memahami tutorial ini dengan mudah.Langkah pertama, pilih salah satu animasi preloader dari dua layanan ini Preloader atau Ajaxload, kemudian simpan hasil gambar anda dalam format gif. Kemudian upload file gambar tadi ke hosting anda (gunakan yg free seperti geocities.com atau page creator)
Langkah kedua,buka notepad anda, kemudian simpan kod dibawah ini dengan nama preloader.js (pastikan ekstention berakhiran .js, bukan .txt)
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";
}
Langkah ketiga,upload file preloader.js ke hosting anda (gunakan yg free seperti geocities.com atau page creator).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";
}
Cara Pasang diblogger
1. Login ke blog.Klik Layout-->Edit html.Kemudian cari kod ini <body>
2.Kemudian gantikan tag <body> dengan kod dibawah ini.
<body onLoad='init()'>
<div id='loading' style='position:absolute; width:100%; text-align:center; top:300px;'> <img border='0' src='http://lokasi-simpan.com/gambarpreloader.gif'/></div>
<script src='http://lokasi-simpan/preloader.js' type='text/javascript'/>
<div id='loading' style='position:absolute; width:100%; text-align:center; top:300px;'> <img border='0' src='http://lokasi-simpan.com/gambarpreloader.gif'/></div>
<script src='http://lokasi-simpan/preloader.js' type='text/javascript'/>
3.Klik preview dulu, jika tiada sebarang error muncul, klik save.
Untuk menempatkan image loading tersebut anda perlu ubah text-align:center dengan left, right, top atau bottom.
Selesai.
p.s. Peringatan!!!Lebih baik anda backup dulu template anda kerana perubahan pada tag <body>ini, melanggar kod dasar html.
Design by 
© 2008-2009 | Powered by
7 comments:
bro, aku ada mslh utk upload file js tu..nk gne yg bro ckp tu, xleh..huhu
bro, aku ada mslsh nk upload file js tu..nk guna uploader cam bro ckp tu, xleh la..huhu
tima kasey bebanyak sama in tutorial.:D
x-pro :copy kod ini [ http://tinyurl.com/dafd2n ]dan gunakan sebagai file preloder.js anda.
bro, aku xda mslh dgn file preloder.js tu..cuma mslh aku xleh nk upload preloder.js tu..nk guna pe ek? ada link x?
bro, tq..dh dpt dh..hoho
wouw, thanks brother . . .
Catat Ulasan
Komenlah sesuka hati anda kerana tuan empunya blog ini buta hati dan buta perasaan tetapi tidak buta mata.