Home » » Cara Membuat Status Loading

Cara Membuat Status Loading

Hello Pengunjung Oktri Blog Tutorial kita kali akan membahas cara membuat status loading,Mencari kesana kemari ternyata dapat juga terima kasih mbah Google,Status Loading disini 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,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.

Pertama, pilih saja dulu salah satu animasi preloader dari dua layanan ini Preloader atau Ajaxload, kemudian simpan hasil gambar dalam format gif tersebut. Kalo sudah, silahkan upload file gambar tadi ke hosting anda

Langkah kedua silahkan buka notepad anda, kemudian simpan kode dibawah ini dengan nama preloader.js (pastikan ekstensi 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";
}

Kalo sudah, silahkan upload file preloader.js ke hosting anda
atau jika bingung gunakan kode javascript punya saya aja, kodenya dibawah ini :

http://oktri.googlecode.com/files/preloader.js

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://lh4.ggpht.com/_7Y9pl24WpQY/SusfCp6mZWI/AAAAAAAACCI/23-3MVdUteQ/ajax-loader_thumb.gif?imgmax=800'/></div> <script src='http://oktri.googlecode.com/files/preloader.js ' type='text/javascript'/>


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-nya. ( jika bingung pakai yang itu saja ).

Untuk mengubah penempatan gambar loading silahkan atur sendiri pada kode text-align:center (silahkan bermain saja dengan kode center, coba ganti dengan left, right, top atau bottom). Sebenarnya masih banyak trik lainnya, silahkan dikembangkan sendiri ya.






Artikel Terkait:

8 komentar:

  1. Mas Url gambar yg kita uplod di taro dimana??

    BalasHapus
  2. koq ga bs ya mas di blogspot saya?

    error tuh..
    apa pengaruh dengan

    body expr:class='"loading" + data:blog.mobileClass

    yang sudah ada sebelum penambahan scrip diatas? pliss solusinya donk

    BalasHapus
  3. nice share gan.. tengkyuuu oia jgn lupa follow blog saya di www.javaica.net yah gan

    BalasHapus
  4. Mantap gan info nya .. terima kasih info ia sangat bermanfaat ....

    BalasHapus
  5. keren mas...tp bikin lemod
    btw, thanks infonya

    BalasHapus

Fivers

Selamat Datang Di OKTRI BLOG

Selamat datang di Blog saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya,apabila berkenan silahkan berkomentar dan follow blog saya,mari kita saling berbagi ilmu tentang apa saja...Selengkapnya tentang Tutorial Ini

Sekilas tentang penulis

Nama saya Oktri darmadi,saya seorang Mahasiswa S1 Teknik Informatika Di IBI DARMAJAYA Bandar Lampung.

Social Stuff

  • RSS
  • Twitter
  • Facebook
  • HOME
Oktri