Cara Membuat Animasi Loading Saat Blog Di Buka + Demo

Mungkin beberapa dari kalian akan tertarik ketika melihat blog lain yang menggunakan animasi loading saat membuka blog mereka. Ini juga bermanfaat bagi kalian jika menggunakannya, karena ketika kalian membuka blog yang menggunakan animasi loadingnya, mereka tidak melihat ketidakteratuan page saat mereka loading, dan ketika animasi loading tersebut selesai, maka nanti yang tampil adalah page yang utuh. Animasi yang digunakan kali ini adalah berasal dari Query loader yaitu tampilan page yang hitam kosong, hingga menampilkan page yang utuh. Artinya pengunjung tidak melihat page kita saat sedang loading. Berikut saya berikan screenshot yang telah saya coba pada website saya.

• Demo

Screenshot :

Cara Pemasangan :
1. Login pada akun blogger masing-masing
2. Masuk pada bagian Template dan klik Edit HTML
3. Kemudian paste kode berikut diatas 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'/>

4. Setelah itu paste lagi kode berikut diatas kode </body>

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

5. Terakhir paste kode berikut diatas kode ]]></b:skin>

.QOverlay {
background-color: #000000; /* warna background saat blog anda di loading */
z-index: 9999;
}

.QLoader {
background-color: #CCCCCC; /* warna bar loading */
height: 1px;
}

.QAmt {
color:#FF530D; /* warna angka persentase saat loading */
font-size:50px;
font-weight:bold;
line-height:50px;
height:50px;
width:100px;
margin:-60px 0 0 -50px;
}

Nb : Kalian dapat merubah warna dan tulisan sesukanya pada bagian ini

6. Jika sudah, Save Template dan liat perubahannya.

Oke sekian dulu ya tips kali ini, jika kalian mengalami kesulitan atau kurang jelas, isi form komentar dibawah ini
Selamat Mencoba!

Thanks To : http://www.anaksmanda.com

Tweet