tria33: Cara mudah Membuat Indikator Loading Page di Blog

Tuesday, 7 May 2013

Cara mudah Membuat Indikator Loading Page di Blog

Posted by Tria Irawan at 06:27

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&&!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";

}

</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:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEAQcof4ffczJGBy2is4WJVO3u0Vg8ABBra8yICMveMQKppxVJZc0j8bDDMNWvInz8opIdg7SrNGzfw84ufYEXBxGHBmBWhPaU9nRG77YjAdQe87Xxuj1duxmtgiYiG6KsV2c4SMBGU78/s1600/loading3.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqIn9gYRbgIy-Nwak6mp3wpzjsPYj39oXXLXSoku4lrzsBPB58Wz7NThEEKabhusxx3R47H0rdi6E3hihJx4vUufzbchMAe6NpuZ0ovms0GwYponQbE7T7SyABvxVLwu1Uw1iqKZ4AGlQ/s1600/loading5.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaA8cyJELlImTbLSHnD1HdeyVxt1YJuUYrvTJJJ5-59wXJOh0mj-zwzj9Q7k4hsv8BxzicsKiuFtpUAHZc81diwuByjd1175k4SjzWcqZ_mieT2U9hoQuTmd3rgmEBiX4K8qpFthIEjUc/s200/loading6.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2l_WJRoLPWDM_aFzSRlUc1scLAoeeq_u9hBEwIf_exMW7JMbJQUqACrDkCchWJJAxipxvkVAft2KWBfaDqLvl0IiQN2xwO5ME9NoPuyrmSaYaKLQeo5vvTB-SL5GUiW3k-1LQnCwEr9A/s1600/loading_page1.gif

url diatas akan tampak gambar-gambar seperti dibawah ini: