Animasi loading page memberikan tampilan yang pasti dan penuh,
dalam artian animasi akan selesai setelah loading page terbuka semua,
jarak waktu loading page bisa kita ukur dengan adanya animasi ini,
karena animasi ini menggunakan hitungan persen.
Script animasi loading page ini saya dapat dari Kang dadang yang merupakan versi awal dari script tersebut. Untuk membuat dan memasang animasi loading page pada blog sobat,
1. Sobat Login dulu ke akun Blogger sobat dulu
2. Masuk pada Design
3. Edit HTML dan cari kode ]]></b:skin>
4. Dan letakan kode dibawah ini Tepat diatas Kode ]]></b:skin>
===========================================================
.QOverlay {
background-color: #000000;
z-index: 9999;
}
.QLoader {
background-color: #CCCCCC;
height: 10px;
}
.QAmt {
color:#FF530D;
font-size:50px;
font-weight:bold;
line-height:50px;
height:50px;
width:100px;
margin:-60px 0 0 -50px;
}
===========================================================
Script animasi loading page ini saya dapat dari Kang dadang yang merupakan versi awal dari script tersebut. Untuk membuat dan memasang animasi loading page pada blog sobat,
1. Sobat Login dulu ke akun Blogger sobat dulu
2. Masuk pada Design
3. Edit HTML dan cari kode ]]></b:skin>
4. Dan letakan kode dibawah ini Tepat diatas Kode ]]></b:skin>
===========================================================
.QOverlay {
background-color: #000000;
z-index: 9999;
}
.QLoader {
background-color: #CCCCCC;
height: 10px;
}
.QAmt {
color:#FF530D;
font-size:50px;
font-weight:bold;
line-height:50px;
height:50px;
width:100px;
margin:-60px 0 0 -50px;
}
===========================================================
5. Kemudian cari kode </head>
6. Letakkan kode dibawah ini tepat diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://situseo.googlecode.com/files/loadpage.js' type='text/javascript'/>
===========================================================
*NOTE : Untuk kode yang diberi warna Biru, jika kode tersebut sudah ada dalam template Sobat semua, Sobat tidak perlu menambahkan kode tersebut (cukup 1 saja)
7. Kemudian cari kode </body> dan letakan kode dibawah ini diatas Kode </body>
===========================================================
<script>
QueryLoader.selectorPreload = "body";
QueryLoader.init();
</script>
===========================================================
8. Terakhir Save/Simpan.
Maka jadilah loading keren yang tentu saja mempercantik Blog Sobat... :)
0 Komentar "Cara Membuat Animasi Loading JQuery Di Blog"