Bikin Preload Pakai QueryLoader Pada Blogspot

QueryLoader

Preload Your Website With Style

QueryLoader adalah animasi yang akan keluar dalam pemanggilan halaman/page, istilah kerennya sih preloader page. Sebelumnya yang lebih populer yaitu LazyLoader, Jika LazyLoader untuk gambar atau beberapa element, nah QueryLoader ini bisa menjadi preloader halaman/page. Tetapi tidak hanya halaman saja, gambar atau elemen-elemen dalam blog juga bisa diberi animasi dalam pemanggilannya.

Fitur:

• Preload sebuah halaman web secara keseluruhan
• Preload elemen pada halaman
• Preload semua gambar, dan background dari CSS
• Mudah untuk diimplementasikan
• Animasi bar yang adjustable

Cara Mengimplementasikan

Sebelumnya kalian harus unduh file yang akan kita gunakan.

• QueryLoader
• QueryLoader dengan persentase

Ok langsung aja kita mulai!

• Unzip file yang sudah kalian unduh tadi
• Upload ke webserver seperti Google Code
• Selanjutnya masukkan script dibawah ini, tepat diatas tag </head> 
<script src='http://code.jquery.com/jquery-1.5.min.js' type='text/javascript'></script> <script src='http://kidzoom.googlecode.com/files/queryLoader.js' type='text/javascript'></script>
• Setelah itu taruh script dibawah ini diatas </body>
<script> QueryLoader.selectorPreload = "body"; QueryLoader.init(); </script>
• Nah selanjutnya kita masukkan code CSS-nya
  

QueryLoader Tanpa Persentase

.QOverlay { background-color: #000000; z-index: 9999; } .QLoader { background-color: #00818B; height: 2px; }
QueryLoader Dengan Persentase 

.QOverlay { background-color: #000000; z-index: 9999; } .QLoader { background-color: #CCCCCC; height: 1px; } .QAmt { color:#333333; font-family:"Trebuchet MS",Arial,Helvetica,sans-serif; font-size:40px; font-weight:bold; line-height:50px; height:50px; width:100px; margin:-60px 0 0 -50px; }
 

Code CSS tersebut dapat kalian ubah/modifikasi untuk menyesuaikan dengan template anda.