Cara Membuat Status Loading

ajax-loader3 Tutorial kita kali akan membahas cara membuat status loading, maksudnya adalah pada waktu sobat membuka halaman blog milik sobat, nantinya akan muncul sebuah image / gambar animasi loading yang atraktif sebelum blog tampil keseluruhan.

Pemasangan status loading ini akan mengubah sedikit kode HTML yang ada di template, jadi saya sarankan gunakan blog cadangan untuk mencoba tutorial ini, atau backup template sobat sebelum mengubah kode HTML-nya.


Karena kode yang di ubah adalah <body> dan saya tidak tau pasti apakah dengan mengubah kode tersebut akan melanggar TOS Blogger atau tidak. Makanya saya sarankan sebaiknya gunakan blog cadangan saja untuk mencoba membuat status loading ini. Baiklah, lanjut ya.

Untuk pilihan animasi status loading-nya bisa sobat lihat di Ajax Load.

Silahkan upload kode Javascript berikut ini ke tempat penyimpanan online. Pastikan file yang di upload berkhiran .js

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";
}
Cara upload file javascript-nya, copy paste semua kode diatas kedalam notepad, kemudian simpan file tersebut dengan extension atau akhiran .js dan setelah itu upload ke tempat penyimpan online atau jika mau lebih mudah upload saja di google sites.

Kemudian ikuti langkah berikut ini :
  1. Silahkan login dulu ke Blogger.
  2. Kemudian tuju halaman Edit HTML.
  3. Klik Expand Template Widgets.
  4. Cari kode <body> dan ganti kode tersebut dengan kode dibawah ini :

    <body onLoad='init()'><div id='loading' style='position:absolute; width:100%; text-align:center; top:300px;'> <img border='0' src='http://tempat-simpan.com/gambarpreloader.gif'/></div> <script src='http://tempat-simpan/preloader.js' type='text/javascript'/>
  5. Simpan Template.
Keterangan :
  Kode yang berwarna hijau adalah url dimana sobat menyimpan gambar animasi status loading-nya.
  
  Kode yang berwarna merah adalah url tempat sobat mengupload kode javascript animasi status loading-nya.

Jika sobat malas untuk menyimpan gambar animasi status loading, saya punya beberapa gambar yang bisa sobat gunakan dibawah ini :


ajax-loader8 ajax-loader
ajax-loader7 ajax-loader2
ajax-loader6 ajax-loader3
ajax-loader9 ajax-loader4
ajax-loader10 ajax-loader5
ajax-loader12 ajax-loader11
ajax-loader14 ajax-loader15

Selamat Mencoba !

Berlangganan artikel terbaru via Email
Artikel Lainnya :

10 comments

8 November 2009 pukul 04.41

Wah nambah ilmu lagi neh, ada yang baruuu.... mo coba ah. Trims yaa dah berbagi ilmu.

8 November 2009 pukul 12.27

wah udah lama gag posting nih kawan.infonya sangat berguna.tapi menurut saya ini tidak efektif karena hal ini biasanya kata para master akan mengganggu rawler google.nice info kok tapinya

8 November 2009 pukul 18.42

TOP bgt mas..
berbagi ilmu nya yang bener2 luar biasa :)

tukeran link yuk mas..


link nya udah saya pasang di blog saya neh..
silahkan di cek

http://rahasia-masa-depan.blogspot.com

thx yah..

8 November 2009 pukul 19.10

wow...bagus BOS...tapi didalam tag body aku udah ada triknya si lightbox...iihihihiih

12 Januari 2010 pukul 00.42

Coba ya mas..keren

Anonim
25 Desember 2010 pukul 07.50

hahaha KOPI PASTE YA....script atas itu ada kesalahana,,ketahuan tukang kopasss

Anonim
23 Januari 2011 pukul 10.34

mas keren :D aku mau coba.. makasih yaa

12 Februari 2011 pukul 10.12

kalau yg uda createproject gimana eek lah

14 Juni 2011 pukul 12.08

nyari kata body dimana ?
saya pusingggg

7 Mei 2012 pukul 11.21

mantap, ini yang saya butuhkan, untuk membuat pengunjung sedikit bersabar karena terdapat loading dari fungsi ajax ini, yang memungkinkan pengunjung mengerti bahwa apa yang dia klik sedang di proses..
makasi banyak ya mas tutorialnya.

Posting Komentar

Reader Community

Recent Comments