Menambahkan QueryLoader (LazyLoad)

Pengertian QueryLoader (LazyLoad).
QueryLoader adalah layar kosong hitam (bisa diubah) yang meliputi blog Anda sampai semua konten dimuat, yang berarti bahwa pengunjung tidak akan melihat yang sebenarnya loading blog Anda, bukannya itu, mereka akan melihat halaman loading dengan bar dan persentase loading blog secara keseluruhan, itu dibuat dengan menggunakan j-query dan css. mudah untuk diterapkan ke blog blogger Anda, dan menyesuaikan mampu.
=========================================================================

===Langkah 1, menambahkan file java.

Dalam langkah ini kita akan menambahkan file script ke template blogger Anda.
Silahkan menavigasi ke dashboard>> Desain>> edit html, dan silahkan cari kode berikut,

</head>

Dan tepat sebelum menambahkan kode berikut

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

 ===Langkah 2, menambahkan Kode java.

Dan pada halaman yang sama, silahkan cari kode berikut,

</body>

Dan sebelum menambahkan kode berikutnya,

<script>
 QueryLoader.selectorPreload = &quot;body&quot;;
 QueryLoader.init();
</script>  

===Langkah 3, menambahkan Kode Css.

sekarang pada halaman yang sama juga, cari kode ini, 

]]></b:skin>

Dan pada halaman yang sama, silahkan cari kode berikut, 

.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;
} 

  
Kemudian Klik  Save Template

Dan blog Anda sekarang memiliki script terinstal dan siap, preview klik atau melihat blog Anda untuk melihat script dalam tindakan.


Langkah tambahan, Sesuaikan warna.
Sekarang ini merupakan langkah ekstra dan Anda bisa melakukannya atau tidak, yang Anda inginkan, :-)
Jika Anda ingin mengubah warna, Anda harus mengubah nilai dalam kode css, "Langkah 3"
Silahkan lihat pada gambar berikut untuk mengetahui apa apa yang Anda harus mengubah untuk mendapatkan gaya Anda sendiri. 

 

s'moga bermanfa'at :D

Bersumber : allblogtools