Pages

Thursday, 25 October 2012

Membuat Animasi Loading Page Keren Dengan jQuery™

Photob
ucket
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 ]]></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 HIJAU, 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 diatasnya </body>
 ===========================================================
<script>
QueryLoader.selectorPreload = &quot;body&quot;;
QueryLoader.init();
</script>
===========================================================
8. Terakhir Save/Simpan Template sobat semua.... 

No comments:

Post a Comment