Javascript DIV/Image Loader for Blog: Cara Membuat Javascript Loading

Panduan BloGGeR Membuat Javascript Loader.

Javascript loading atau biasa dikenal juga sebagai javascript pre-loading dan javascript image loader, sebenarnya adalah sebuah fungsi yang tak jauh berbeda. Kesemuanya digunakan untuk menandai proses loading website atau blog. Dengan memanfaatkan fungsi seperti ini, ketika sebuah blog dibuka, maka akan ditampilkan gambar/image atau teks yang memberi pertanda bahwa blog sedang dalam proses loading/membuka. Sesuai dengan namanya, Javascript DIV loader ini memang didesain dengan memanfaatkan kode/elemen DIV di dalam javascripnya, yang difungsikan untuk membentuk konfigurasi penataan dan tampilan gambar/image serta teks.

Karena javascript ini memang dibuat untuk tidak menjadi penambah beban blog yang jadi pengganggu kecepatan loading, oleh karena itu desain yang sederhana menjadi pilihan yang tidak boleh tidak harus dilakukan. Beban 5kb javascript DIV Loader pastinya terasa sangat entheng ketika dibandingkan dengan hasil yang diperoleh melalui fungsi dan keindahan yang mampu ditampilkan. Untuk membuat dan memasangnya di blog juga teramat mudah karena hanya di dua titik javascript dan kode HTML harus kita simpan.

Cara Membuat dan Memasang Javascript DIV Loader

Javascript DIV Loader

/* bgsGR_DIVblogLoader.js  -- gubhug reyot */
function LOADING_DIV_CLASS() {
try {
this.loading_id = 0 ;
this.DIV_STYLE = 1;
this.show_txt = 0;
this.TITLE = 'Loading';
this.DESC = '';
this.AutoCLOSE = 15000; // loading
this.LAST_ACTION_TIME = 0 ;
this.DIV_STATUS = 0; 
this.maintain_position = 1;
this.OBJ_floating = null;
this.floating_start_Y = 180;
this.floating_start_x = 0;
this.floating_center_x = true;
this.DIV_loading_NAME = 'bgs1GR_DIVLoader';
this.bool_ONLOAD_BODY_FUNCTION= false;
this.bool_BODY_LOADED= true;
this.ONLOAD_BODY_FUNCTION_eval = '' ;
this.f_do_onloadbody=  function (){
G_LOAD.bool_BODY_LOADED = true  ;
G_LOAD.f_do_onloadbodyEVAL();
}
this.f_do_onloadbodyEVAL=  function (){
if(this.bool_ONLOAD_BODY_FUNCTION == true ){
eval( this.ONLOAD_BODY_FUNCTION_eval);
this.bool_ONLOAD_BODY_FUNCTION = false;
}
}
this.f_apply_STYLE =  function (){
var HTML_CONTENT = '';
if(this.DIV_STYLE==1){
HTML_CONTENT = '<center><font class="text14_white">  Loading...</font><br><br><img border="0" src="http://i964.photobucket.com/albums/ae124/gubhugreyot/imageloading/bgsGRloading3.gif" ></center>';
}else if(this.DIV_STYLE==2){ 
this.TITLE = addslashes(this.TITLE);
HTML_CONTENT = '<div align="center"><table border="0" width="100%" id="table56" cellpadding="4" height="100%"  cellspacing="0">\<tr>\<td align="center"><br>\<font class="text14_white"><div id="bgs1GR_DIVLoader_frase">  '+this.TITLE+'</div></font><br><br>\<img border="0" src="http://i964.photobucket.com/albums/ae124/gubhugreyot/imageloading/bgsGRloading3.gif"><br><br>\<table border="1" width="100" id="table57" cellpadding="0" background="http://i964.photobucket.com/albums/ae124/gubhugreyot/RedYellowBlueAnimaV5H5.gif" height="20" style="border-collapse: collapse" bordercolor="#CCCCCC" bgcolor="#FFFFFF"><tr><td align="center"><a href="javascript:f_hide_cachingL20k();" class="text11_orange">CANCEL</a></td></tr></table><br>\</td>\</tr>\</table></div>';
}else if(this.DIV_STYLE==3){
HTML_CONTENT = '<table border="0" width="100%" cellspacing="0" cellpadding="0" height="80"><tr><td height="40" align="center"><font class="text11_white"><div id="div_loadingSock_txt">'+this.DESC+'</div></font></td></tr><tr><td align="center" height="40"><img border="0" src="http://i964.photobucket.com/albums/ae124/gubhugreyot/imageloading/processing.gif" width="50" height="3"></td></tr></table>';
}
HTML_CONTENT = '<table border="0" width="222" background="http://i964.photobucket.com/albums/ae124/gubhugreyot/imageloading/bgsGR_ImageLoader-2.png" height="172" cellspacing="0" cellpadding="0"><tr><td align="center">'+HTML_CONTENT+'</td></tr></table>';
if(!document.getElementById(this.DIV_loading_NAME)) return ; 
document.getElementById(this.DIV_loading_NAME).innerHTML = HTML_CONTENT;
}
this.f_CLOSE =  function (id){
if(id > 0 ) if(this.loading_id != id ) return;
document.getElementById(this.DIV_loading_NAME).style.display ="none";
this.DIV_STATUS = 0;
}
this.f_set_style =  function (style_id){
this.DIV_STYLE = parseInt(style_id);
}
this.f_set_desc=  function (desc){
this.DESC = desc;
}
this.f_set_ALL_OPEN=  function (style_id,desc){
if(style_id > 0){
this.f_set_style(style_id);
}else{
style_id = 0;
}
if(desc.length > 0) this.f_set_desc(desc);
this.f_OPEN(style_id);
}
this.f_OPEN =  function (id){
if(id > 0 ) this.loading_id = id  ;
this.DIV_STATUS = 1;
this.f_apply_STYLE();
this.f_set_last_action();
this.f_KEEP_POSITION();
document.getElementById(this.DIV_loading_NAME).style.display ="block";
}
this.f_set_last_action =  function (){
var b       = new Date();
this.LAST_ACTION_TIME = b.getTime();
if(this.AutoCLOSE >0) setTimeout("G_LOAD.f_check_autoclose("+this.LAST_ACTION_TIME+");",this.AutoCLOSE );
}
this.f_check_autoclose =  function (last_action){
if(this.DIV_STATUS!=1) return;
if(this.LAST_ACTION_TIME == last_action){
this.f_CLOSE();
}
}
this.__f_floating_center_x =  function (){
if(!this.floating_center_x) return ;
if(!this.OBJ_floating) return ;
this.floating_start_x =((document.body.clientWidth/2)-150);
}
this.__f_build_floating_obj =  function (){
var d = document;
var px = document.layers ? "" : "px";
var id = this.DIV_loading_NAME;
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(!el) return ;
if(d.layers)el.style=el;
el.sP=function(x,y){
this.style.top=y+px;
this.style.left=x+px;
};
el.y = this.floating_start_Y;
this.OBJ_floating = el;
this.__f_floating_center_x();
this.OBJ_floating.x = this.floating_start_x;
}
this.f_KEEP_POSITION =  function (){
var d = document;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
var px = document.layers ? "" : "px";
if(this.maintain_position == 0) return;
if(this.DIV_STATUS!=1) return;
if(!this.OBJ_floating) this.__f_build_floating_obj ();
var pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
var dY = (pY > this.floating_start_Y) ? pY : this.floating_start_Y;
if(!this.OBJ_floating) return ;
this.OBJ_floating.y += (dY - this.OBJ_floating.y);
this.OBJ_floating.sP(this.OBJ_floating.x, this.OBJ_floating.y);
setTimeout("G_LOAD.f_KEEP_POSITION()", 200);
}
} catch(e){
alert("err loading javascript ,    try refreshing browser cache \n "  + e.message + "\n ");
}
}
var G_LOAD = new LOADING_DIV_CLASS();
if(!JSCACHE) JSCACHE = [] ;
JSCACHE.push(['loading_div.class.js',1]);

Kode HTML dan Javascript

<div id="bgs1GR_DIVLoader"  name="bgs1GR_DIVLoader" style="position:absolute;width:232px;height:172px; z-index: 1000;display='none';filter:alpha(opacity=85);-moz-opacity:.85;opacity:.85;" ></div>
<script>G_LOAD.f_OPEN(1);</script>

Langkah Pembuatan dan Pemasangan

1. Login to Blogger (Login ke BloGGer) : Tuliskan User Name (Nama Pengguna) atau Email Address , kemudian lanjutkan dengan menuliskan Password (Sandi).
2. Dasboard (Dasbor) : Ketika halaman dasbor sudah terbuka (sesaat setelah login), KLIK link Layout/Tata Letak atau Design/Rancangan.
3. Layout (Design) : KLIK Edit HTML.
4. Edit HTML : Backup template (amankan template dengan cara :
   - KLIK Download Full Template (Download Template Lengkap)
   - Simpan file template di folder PC.
5. Tetap di Edit HTML : Copy Javascript DIV Loader kemudian upload di Javascript hosting. Buat linknya dalam bentuk seperti ini :

   <script src="http://..../..../bgsGR_DIVblogLoader.js" type="text/javascript"></script>

6. Cari kode <head> : Gunakan Ctrl+F untuk mencarinya (posisi <head> di bagian teratas template). Letakkan link javascript yang telah terupload di bawah kode <head> dalam bentuk seperti ini :

   <head>
   <script src="http://..../..../bgsGR_DIVblogLoader.js" type="text/javascript"></script>

   .
7. Copy Kode HTML dan Javascript : Letakkan kode HTML dan Javascript ini di bawah kode <body> contoh seperti ini :

   <body>
   <div id="bgs1GR_DIVLoader"  name="bgs1GR_DIVLoader" style="position:absolute;width:232px;height:172px; z-index: 1000;display='none';filter:alpha(opacity=85);-moz-opacity:.85;opacity:.85;" ></div>
   <script>G_LOAD.f_OPEN(1);</script>

8. Simpan (SAVE) : KLIK SAVE/Simpan dan lihat hasilnya dengan membuka blog.

Keterangan/Catatan :

1. Sebelum sampeyan upload javascript di atas, silahkan seandainya sampeyan mau mencoba terlebih dahulu javascript yang sudah dalam bentuk link dan langsung bisa dipasang di bawah kode <head>
   Telah aku sediakan dua buah Javascript DIV Loader dengan bentuk image loader yang berbeda. Seandainya sampeyan merasa cocok dengan tampilannya, javascript ini bisa digunakan selama sampeyan membutuhkan :

1. Javascript DIV Loader 1 :



2. Javascript DIV Loader 2 :





2. Apabila ingin membaca panduan cara cepat mencari kode HTML template (dalam blog), silahkan ikuti panduannya dengan KLIK
   di sini
   .
3. Panduan Cara Backup Template berikut kegunaanya bisa juga sampeyan baca dengan KLIK
   di sini
   .

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «