Home » Cara Membuat Indikator Loading Page di Blog

Cara Membuat Indikator Loading Page di Blog


Cara Membuat Indikator Loading Page di Blog

Alternative Link : [ Click Here ... ]

Salam blogger, berdasarkan pengalaman saya ada beberapa blog yang pernah saya kunjungi yang menggunakan indikator loading halaman. Biasanya sebuah gambar indikator loading akan muncul ketika kita sedang membuka halaman sebuah website. Indikator loading tersebut menunjukan halaman website itu sedang dalam proses loading. Saya kali ini akan sedikit membahas tutorial bagaimana membuat indikator loading page pada blog anda, dengan begitu pengunjung akan tahu bahwa blog anda lagi loading.

Berikut langkah-langkah membuat indikator loading page di blog:
1. Login ke account blogger sobat
2. klik menu Template
3. kemudian pilih Edit Html
4. pilih lanjutkan untuk masuk ke Setup Html
5. setelah masuk jangan lupa centang kotak kecil di pojok kiri yang 
    bertuliskan "expand template widget"
6. lalu sobat cari kode <body>, agar pencarian lebih mudah 
    sobat tekan tombol ctrl+f pada keyboard komputer sobat
7. kemudian hapus kode <body> tersebut dan ganti dengan kode dibawah ini
<body onLoad='init()'>
<span id='loading' style='position:absolute; text-align: center; top:10px; right: 10px;'><img border='0' src='MASUKAN URL LOADING PAGE ANDA DISINI'/></span>
<script>
var ld=(document.all);
var ns4=document.layers;
var ns6=document.getElementById&amp;&amp;!document.all;
var ie4=document.all;
if (ns4) ld=document.loading;
else if (ns6)
ld=document.getElementById(&quot;loading&quot;).style;
else if (ie4)
ld=document.all.loading.style;
function init() {
if(ns4){ld.visibility=&quot;hidden&quot;;}
else if (ns6||ie4) ld.display=&quot;none&quot;;
}
</script>
8. Ganti kode yang warna biru diatas dengan url gambar loading page yang 
    anda suka, misalnya pilih url loading seperti dibawah ini
9. Simpan Template 

kalo sobat masih bingung buat cari gambar loadingnya, pake aja gambar yang saya sediakan dibawah ini:

  • http://2.bp.blogspot.com/--DXslx9Icr8/T_Vu1W96U3I/AAAAAAAABSM/tJstoiYss-A/s1600/loading3.gif
  • http://3.bp.blogspot.com/-S1-3Lc_Af9k/T_Vu5KTALFI/AAAAAAAABSc/flDZabyi2m0/s1600/loading5.gif
  • http://2.bp.blogspot.com/-N7zexuKB7uk/T_Vu55DUWtI/AAAAAAAABSk/3RJTbMtAKAg/s200/loading6.gif
  • http://1.bp.blogspot.com/-p7t9OeFNURE/T_Vu6_nKzHI/AAAAAAAABSs/O7-H-gWJdxo/s1600/loading_page1.gif
url diatas akan tampak gambar-gambar seperti dibawah ini:
            
     
                                
Selamat mencoba dan semoga bermanfaat

Cara Membuat Indikator Loading Page di Blog

Alternative Link : [ Click Here ... ]

16 Comments:

  1. Balasan
    1. iya terima kasih gan atas standing aplos nya. sering sering aja mampir ke sini ya gan

      Hapus
  2. Keren Sob, Nice Share & Mampir juga ya ke Blogku..!!! Oceh Sob... :D

    BalasHapus
    Balasan
    1. thank's sob, iya blog sobat pasti saya kunjungi.

      Hapus
  3. Balasan
    1. Iya sama-sama, makasih ya udah mampir kemari, salam blogger.

      Hapus
  4. ahh ,,jadi membuktikan bahwa blog kita berat kalo gitu sob,,?

    BalasHapus
    Balasan
    1. Ya memang tergantung berat atau tidaknya blog kita si, tapi kalo loading pake animasi kayak gitu org mikir 2x buat nutup blog kita.

      Hapus
  5. tutorialnya mantap gan ...

    Kunjungi blog saya juga ya http://blogzeng.blogspot.com/

    Thank's

    BalasHapus
    Balasan
    1. silahkan dicoba tutorialnya gan, nanti saya mampir ke blog agan
      makasih komentarnya, sukses selalu.

      Hapus
  6. Izin make ah buat blog percobaan saya biar lebih responsive :D
    Tapi kira-kira ini bisa membuat blog menjadi berat deh sob...?

    Koment balik ya sob di Acep-Computer

    BalasHapus
    Balasan
    1. gk ppa lah berat dikit, tapi keren kan

      Hapus
  7. TOKO HANDPHONE TERBESAR TERLENGKAP TERMURAH TERPERCAYA NABILA SHOP Produk dijamin asli orginal.Dapatkan harga promo Nabila Shop Barang yang Kami Tawarkan Semuanya Barang ASLI ORGINAL Ada Garansi Resmi Distributor dan Garansi TAM 2 bebas resiko bebas penipuan.
    Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
    BERMINAT HUB-SMS 085-757-299-675 ATAU KLIK WEBSET RESMI KAMI http://nabilashop77.blogspot.com
    Ready Stock! Samsung Galaxy S4 Mini Rp.2,500.000
    Ready Stock! Apple iPhone 5 Rp.2,700.000
    Ready Stock! BlackBerry 9380 Orlando - Black.Rp.900.000,-
    Ready Stock! BlackBerry Curve 8520 Gemini.Rp.500.000,-
    Ready Stock! BlackBerry Bold 9780 Onyx 2.Rp.800.000,-
    Ready Stock! Blackberry Curve 9320.Rp.700.000,-
    Ready Stock! Samsung Galaxy Note 10.1.Rp.2,500.000.
    Ready Stock! Samsung Galaxy Tab 2 (7.0).Rp. 1.000.000
    Ready Stock! Samsung Galaxy S III Mini.Rp.1.800.000.
    Ready Stock! Samsung Galaxy Nexus I9250 - Titanium Si.Rp.1.500.000,-
    Ready Stock! Samsung Galaxy Note N7100.Rp.2.500.000.
    Ready Stock! Samsung Galaxy Note N7000 - Pink.Rp.1.700.000.
    Ready Stock! Samsung Galaxy Y S5360 GSM - Pure White.Rp.500.000

    BalasHapus

Silahkan berkomentar, komentar sobat adalah inspirasi saya !!