Cara Membuat Animasi Loading Saat Blog Di Buka + Demo -->

Kategori Jawaban

Iklan Semua Halaman

Cara Membuat Animasi Loading Saat Blog Di Buka + Demo

@FauziTMG
9/14/2014
Question/ Pertanyaan/ Soal:

Cara Membuat Animasi Loading Saat Blog Di Buka + Demo?

Answer/ Kunci Jawaban:
Mungkin beberapa dari kalian akan tertarik ketika melihat blog lain yang menggunakan animasi loading saat membuka blog mereka. Ini juga berm.... Baca selengkapnya di JAWABAN.xyz

Jelaskan tentang Cara Membuat Animasi Loading Saat Blog Di Buka + Demo?

Penjelasan:
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.


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