Cara Membuat "QueryLoader" pada Blog

Hari ini kita akan belajar tutorial baru tentang bagaimana menerapkan QueryLoader (LazyLoad) script untuk blog blogspot sobat blogger. QueryLoader adalah  layar hitam kosong (dapat diubah)  yang meliputi blog Anda sampai semua konten dimuat, yang berarti bahwa pengunjung Anda tidak akan melihat loading sebenarnya dari blog Anda, bukan itu, mereka akan melihat halaman loading dengan bar dan persentase pemuatan blog secara keseluruhan dengan menggunakan j-query dan css. mudah untuk diterapkan ke blog blogger Anda, dan mampu untuk menysuaikan..hehhehe. 

A. Langkah pertama. Menambahkan File Java.

Dalam langkah ini kita akan menambahkan file script ke template blogger Anda.
Silahkan berkunjung ke dashboard blog sobat dengan mengEdit HTML, dan silahkan cari kode </head>.

Dan letakkan kode berikut ini tepat sebelum kode </head>.  

<script src='http://code.jquery.com/jquery-1.5.min.js' type='text/javascript'/> 

<script src='http://blogger-loader.googlecode.com/files/queryLoaderpre.js' type='text/javascript'/>

 B. Langkah kedua. Menambahkan Kode Java.

Dan pada halaman yang sama, silahkan cari kode </body>. Dan letakkan kode berikut ini tepat sebelum kode </body>. 

<script> 

          QueryLoader.selectorPreload = &quot;body&quot;; 

          QueryLoader.init(); 

</script>

C. Langkah ketiga. Menambahkan Kode CSS

Masih dalam halaman yang sama, silahkna cari kode ]]></b:skin>, dan letakkan kode berikut ini sebelum kode ]]></b:skin>.

.QOverlay {
 background-color: #000000;
 z-index: 9999;
}

.QLoader {
 background-color: #CCCCCC;
 height: 1px;
}

.QAmt {
 color:#FF530D;
 font-size:50px;
 font-weight:bold;
 line-height:50px;
 height:50px;
 width:100px;
 margin:-60px 0 0 -50px;
}

Untuk melakukan pengeditan warna, silahkan lihat gambar di bawah ini:

Kemudian klik Simpan Template, dan lihat hasilnya.
Semoga bermanfaat dan mohon maaf jika ada error. (Jkt/2012)