Memasang Loading page status

Anda bosan menunggu loading page blog anda ? Setelah lihat salah satu blognya Om Agus saya terinspirasi untuk memasangnya di blog saya. Image page lodaer ini sebenarnya hanya sebuah gambar animasi yang muncul ketika anda membuka sebuah situs dan gambar tersebut begerak selama loading page berlangsung.

Kita bisa memanfaatkan jasa dari preloading generator image generator, Ajaxload atau Preloader untuk menghasilkan gambar .gif. Atau bisa juga gambar animasi buatan anda sendiri :D !


Nah, berikut tutorial memasang loading image status diblog anda.
  1. Siapkan dulu gambar yang akan dipasang, bisa anda ambil dari Ajaxload atau Preloader. Upload gambar tersebut ke Google Pages atau Geocities.
  2. Kita membutuhkan javascript agar image loading bisa berjalan dengan baik. Kurang lebih seperti ini kode nya :


    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";
    }


  3. Kopi dan paste kode tersebut di Notepad. Upload file text tersebut dengan nama pageloader.txt
  4. Lalu tuju Edit HTML pada blogger anda, pasang kode berikut dibawah kode </head> atau diatas kode <body>

    <div id='loading' style='position:absolute; width:100%; text-align:center; top:600px;'>
    <img border='0' src='http://url gambar kamu/gambar.gif'/></div>
    <script src='http://URL server kamu/pageloader.txt' type='text/javascript'/>

Jika sudah, simpan hasil kerja anda. Sekarang silahkan lihat halaman blog anda :D
Jika tidak bekerja, mungkin anda kurang memperhatikan tutorialnya dengan baik, atau pada file Javascriptnya. Semoga berhasil :)




Revisi


Tutorial diatas saya buat untuk sebisa mungkin tidak melanggar TOS dari blogger, namun saya tetap tidak menyelesaikan tutorial ini seperti yang kawan - kawan harapkan ... hik,hik ...... Jika kurang mengerti maksud saya, silahkan baca lanjutan dibawah ini ya :D

Sudah ada yang berkomentar bahwa Gambar loading pagenya kok muncul terus ?:x Menanggapi hal itu, saya ingin menjelaskan bahwa tutorial diatas belum sempurna. Seperti yang dikatakan om Agus, kita harus mengedit bagian <body>, dan itu masih janggal. Mengaapa ? Karena takut melanggar TOS dari blogger tentunya. Namun jika anda tetap ingin mengubahnya ikuti tutorialnya berikut :

  1. Langsung saja bagian peletakkan script. Cari kode <body> dan ganti dengan <body onLoad='init()'> .
  2. Jika sudah tambahkan kode nomor 4 dibawah kode <body onLoad='init()'>


  3. <body onLoad='init()'>
    <div id='loading' style='position:absolute; width:100%; text-align:center; top:600px;'>
    <img border='0' src='http://url gambar kamu/gambar.gif'/></div>
    <script src='http://URL server kamu/pageloader.txt' type='text/javascript'/>


Jika sudah simpan hasil kerja anda. Info lebih lengkapnya bisa anda baca di blognya Om Agus ... :D

4 komentar:

7 Februari 2009 pukul 11.22
Anonim mengatakan...

Barusan dari O-om, tapi sukses bro

27 April 2009 pukul 03.11 Ary Selidah mengatakan...

mas kalau bikin photo berjalan gimana yach ... maklum pemula

19 Mei 2009 pukul 01.51 Muhib Faisal mengatakan...

Q mo pergi ke TKP dulu ya bro.......:D

7 Desember 2009 pukul 22.59 Omponk mengatakan...

wokeh, aku mengerti sekarang. (Apanya ya?> hihi) mungkin untuk pelanggaran TOS atau tidak bisa tanya sama bloggernya langsung kali ya?

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

Posting Komentar

Anda bisa menggunakan HTML seperti <b> , <i>, <s>, <a> ... Jangan spamming, komentar bernada spam akan kami hapus.
Terima kasih telah berkomentar di JogjaWiki

 

Post yang berkaitan :

Grab this Widget ~ Blogger Accessories
 
© Copyright 2010 - Jogja Wiki Blog - Best viewed in 1152 x 864 pixel by Mozzila Firefox
Our Network at Bloggercustom and Healthy Tips | Post Entries | Comments -