Cara Membuat Animasi Loading Page Blog dengan jQuery
Animasi loading page yaitu tampilan animasi sewaktu page blog sobat sedang melakukan loading,setelah loading page selesai, maka animasi loading juga selesai. Waktu
loading page bisa diukur dengan adanya animasi ini, karena animasi ini
menggunakan hitungan persen.Untuk membuat dan memasang animasi loading page pada blog Sobat, langsung saja ikuti tutorial/panduan di bawah.
- masuk ke Design > Edit HTML lalu cari kode ]]></b:skin> dan letakan kode berikut ini diatas ]]></b:skin>.
/* ---------------
jquery animation loading page
---------------------------------- */
.QOverlay {
background-color: #000000; /* background color loading */
z-index: 9999;
}
.QLoader {
background-color: #CCCCCC; /* color bar loading */
height: 10px;
}
.QAmt {
color:#FF530D; /*loading Color number*/
font-size:50px;
font-weight:bold;
line-height:50px;
height:50px;
width:100px;
margin:-60px 0 0 -50px;
}
jquery animation loading page
---------------------------------- */
.QOverlay {
background-color: #000000; /* background color loading */
z-index: 9999;
}
.QLoader {
background-color: #CCCCCC; /* color bar loading */
height: 10px;
}
.QAmt {
color:#FF530D; /*loading Color number*/
font-size:50px;
font-weight:bold;
line-height:50px;
height:50px;
width:100px;
margin:-60px 0 0 -50px;
}
- kemudian cari kode </head> dan letakan kode berikut ini di atasnya.<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://tutorialbelajarblogger.googlecode.com/files/loadingpage.js' type='text/javascript'/> - Untuk kode yang diberi warna merah (jQuery), tidak usah dipasang lagi jika sudah terdapat di template Anda (cukup 1 saja).
- Selanjutnya cari kode </body> dan letakankode berikut ini di atasnya.
<script>
QueryLoader.selectorPreload = "body";
QueryLoader.init();
</script>
QueryLoader.selectorPreload = "body";
QueryLoader.init();
</script>
- Save template Anda dan coba buka blog Sobat untuk melihat hasilnya.
- Bila script tidak berfungsi silakan cek ulang apakah Sobat sudah mengukuti langkah di atas dengan benar. Jika Sobat sudah mengikuti semua langkah dengan benar namun scriptnya tidak berfungsi juga, berarti ada kemungkinan script tersebut bentrok dengan script yang lain.
Terima Kasih sobat telah membaca artikel 
0 komentar:
Posting Komentar