Tutorial pasang loading animasi

.

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).

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'/>

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.

Mungkin artikel dibawah yang sedang anda cari



7 comments:

x-po shop™ berkata...

bro, aku ada mslh utk upload file js tu..nk gne yg bro ckp tu, xleh..huhu

x-po shop™ berkata...

bro, aku ada mslsh nk upload file js tu..nk guna uploader cam bro ckp tu, xleh la..huhu

muhammad shaufiq berkata...

tima kasey bebanyak sama in tutorial.:D

deenoh berkata...

x-pro :copy kod ini [ http://tinyurl.com/dafd2n ]dan gunakan sebagai file preloder.js anda.

x-po shop™ berkata...

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?

x-po™ berkata...

bro, tq..dh dpt dh..hoho

Rifyal berkata...

wouw, thanks brother . . .

:)) ;)) ;;) :D ;) :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Catat Ulasan

Komenlah sesuka hati anda kerana tuan empunya blog ini buta hati dan buta perasaan tetapi tidak buta mata.

 

Pelawat

free counters
BlogInfoTips

Pengikut

Recent Comments

Powered by Deenoh

© Copyright 2007-2009. Blog tutorial . All rightsreserved | Bloginfotips.com is proudly powered by Blogger.com | Template redesign by Deenoh