Membuat gambar loading tampil pada blog

Gambar loading diperlukan untuk menunjukkan bahwa halaman yang sedang dibuka belum tampil seutuhnya, kemudian gambar loading akan hilang setelah halaman tersebut lengkap. Sehingga setiap pengunjung membuka halaman blog, maka gambar loading juga akan tampil memberikan indikasi loading sedang berlangsung.

Namun sebenarnya, gambar tidak harus berupa gambar loading yang sering kita lihat seperti gambar loading blog saya ini. Tapi juga bisa berupa gambar yang lain, misalnya gambar anda yang sedang berlari, atau sesuatu yang sedang bergerak. Bisa juga gambar berhenti sesuai dengan keinginan anda. Yang penting anda harus mengetahui dimana gambar itu disimpan. Atau anda menginginkan gambar itu tersimpan di folder anda ? Bagi para senior hal ini tentu bukan menjadi masalah, tapi bagi para pendatang baru di blogger, tentu hal yang kecil harus kita terangkan juga, supaya tidak terjadi kesalahan, ok.
Bila anda telah menemukan gambar (dengan browsing di internet) yang akan digunakan, silahkan klik kanan kemudian cari 'copy image location' yang nanti akan kita paste di script yang akan kita pasang di widget blogger.

Tapi bila anda tidak yakin bahwa gambar itu akan tetap di situ alias tidak pindah alamat, seperti kalau kita mengambil gambar di photobucket yang setiap saat bisa diedit atau raip sama sekali (bila kamu mengambil gambar bukan di folder sendiri) , kamu bisa menyimpannya di folder kamu sendiri dimana blogger telah menyediakannya yaitu di picasa.

Langkah selanjutnya silahkan pasang script berikut di dalam tag head (sebelum tag /head) di blogger template html anda 

 

 caranya: 

(buka dashboard - layout - edit html ):

 

<script type="'text/javascript'"> window.onload = detectarCarga; function detectarCarga() { document.getElementById("imgLOAD").style.display="none"; } </script>

# Lalu SAVE 

Selanjutnya  pasang script berikut di 'html/java script widget' anda (buka layout - page element - add a gadget - html/javascript):

 

<div id="imgLOAD" style="position:fixed;top:50px;right:200px" align="right"><br /> loading,sabar menanti,kacian d lu...<br /> <br /> <img src="alamat gambar" /></div>

Selanjutnya kamu bisa atur penempatan gambar dan tulisan yang ada di situ, juga jangan lupa paste alamat gambar yang tadi telah kamu copy di dalam tanda "alamat gambar"