Rabu, 04 Februari 2009

Menambahkan Kotak Pesan Loading

Pernahkah Anda membuka sebuah situs, yang apabila Anda buka muncul pesan "Please Wait.." atau pesan yang lainnya, yang akan hilang dengan sendirinya ketika halaman situs tersebut telah lengkap dengan tampilannya. Pesan yang seperti itu dinamakan "pre loading message". Nah kalo Anda tertarik untuk memasang pesan tersebut mari kita ikuti langkah-langkahnya.

Pre loading message ini dibuat oleh Simon Willison dengan alamat situsnya http://simon.incutio.com

Langkahnya:

  1. Buka halaman tempat Anda upload file Java Script, kalo saya pakainya yang gratisan http://geocities.yahoo.com
  2. Copy kode berikut ini dan paste di Notepad, lalu simpan dengan nama preLoadingMessage.js

    document.write('<div id="loading"><br><br>Please wait...</div>');

    // Created by: Simon Willison | http://simon.incutio.com/
    function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
    window.onload = func;
    } else {
    window.onload = function() {
    if (oldonload) {
    oldonload();
    }
    func();
    }
    }
    }

    addLoadEvent(function() {
    document.getElementById("loading").style.display="none";
    });

  3. Lalu upload ke tempat penyimpanan file Java Script Anda, kemudian catat alamat yang sudah selesai Anda upload misalnya http://www.geocities.com/djoko/preLoadingMessage.js
  4. Copy dan Paste kode CSS berikut diatas ]]></b:skin>

    #loading {
    width: 200px;
    height: 100px;
    background-color: #c0c0c0;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -50px;
    margin-left: -100px;
    text-align: center;
    }
  5. Copy dan Paste kode ini di bawah ]]></b:skin>

    <script type="text/javascript" src="preLoadingMessage.js"></script>

    Jangan lupa ganti dulu "preLoadingMessage.js" dengan alamat yang sudah dibuat diatas misalnya dengan alamat yang tadi http://www.geocities.com/djoko/preLoadingMessage.js
  6. Simpan dan coba Anda buka Blog Anda

Saya sudah mencobanya disini http://muparrih-make.blogspot.com/



2 komentar:

  1. Tambahan: Anda juga bisa merubah dan menambah kode CSS-nya sesuai dengan keinginan Anda, misalnya jadi seperti ini:

    #loading {
    width: 500px;
    height: 400px;
    background-color: #ffffff;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -50px;
    margin-left: -100px;
    text-align: center;
    font-size:20%;
    dll..
    }

    BalasHapus
  2. bagus,... mantab...hayoo spa yang mo pasang..!!! buruan, mumpung stok masih tersedia...

    BalasHapus

Recent Posts

Recent Comment

Popular Posts

KenaliDia.Com