Cara Membuat QueryLoader (LazyLoad) Untuk Blog

Ini adalah jawapan bagi mereka yang menanyakan bagaimana untuk membuat loading page di halaman utama seperti yang anda dapat lihat apabila melawat blog saya ini.

Untuk membuat page loading itu saya menggunakan kod java + css yang dipanggil sebagai QueryLoader atau lebih dikenali sebagai LazyLoad.

QueryLoader adalah skrin hitam kosong (boleh diubah) yang meliputi blog anda dan semua kandungan yang dimuatkan, yang bermaksud bahawa pelawat-pelawat anda tidak akan melihat beban sebenar blog anda, bukan itu, mereka akan melihat halaman yang dimuatkan dengan bar dan peratusan beban blog keseluruhan, ia dibina menggunakan j-query dan css. mudah untuk digunakan ke dalam blog blogger anda, dan dapat diubahsuai dengan mudah.

Langkah Pertama : Memasukkan File Java Script


Masuk ke Dashboard >> Design >> Edit HTML dan cari code di bawah


</head>


Masukkan kod di bawah sebelum kod </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'/> 

Langkah Kedua : Memasukkan Kod Java

Pada halaman yang sama cari kod di bawah

</body>

Masukkan kod di bawah sebelum kod </body>

<script>

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

QueryLoader.init();

</script>

Langkah Ketiga : Memasukkan Kod CSS

Pada halaman yang sama cari kod di bawah

]]></b:skin>

Masukkan kod di bawah sebelum kod ]]></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;

}

Langkah Terakhir : Tekan butang "preview" untuk memastikan tiada kod error, jika tiada tekan butang "save template"

Sekiranya anda ingin mengubah kod warna sila runjuk gambar di bawah untuk penerangan mengenai kegunaan bagi setiap kod warna.

CREDIT TO : gayadesign.com