Membuat Animasi Loading Page Dengan jQuery
Situseo Blog : 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 kalian, masuk pada Design - Edit HTML dan cari kode
]]></b:skin> dan letakan kode dibawah ini 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;
}
kemudian cari kode
</head> dan letakan kode dibawah ini diatasnya<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'/>
untuk kode yang diberi warna merah, jika kode tersebut sudah ada dalam template kalian, kalian tidak perlu menambahkan kode tersebut (cukup 1 saja)
selanjutnya cari kode
</body> dan letakankode dibawah ini diatasnya<script> QueryLoader.selectorPreload = "body"; QueryLoader.init(); </script>
Save template kalian dan coba buka blog kalian untuk mengetestnya
Semoga bermanfaat,
Sumber : Kang Dadang
Situseo Blog : 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 kalian, masuk pada Design - Edit HTML dan cari kode
]]></b:skin> dan letakan kode dibawah ini 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;
}
kemudian cari kode
</head> dan letakan kode dibawah ini diatasnya<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'/>
untuk kode yang diberi warna merah, jika kode tersebut sudah ada dalam template kalian, kalian tidak perlu menambahkan kode tersebut (cukup 1 saja)
selanjutnya cari kode
</body> dan letakankode dibawah ini diatasnya<script> QueryLoader.selectorPreload = "body"; QueryLoader.init(); </script>
Save template kalian dan coba buka blog kalian untuk mengetestnya
Semoga bermanfaat,
Sumber : Kang Dadang