Januari 21, 2012

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 = &quot;body&quot;;
QueryLoader.init();
</script>

Save template kalian dan coba buka blog kalian untuk mengetestnya

Semoga bermanfaat,
Sumber : Kang Dadang

15 Diskusi untuk Membuat Animasi Loading Page Dengan jQuery

5 Februari 2012 pukul 09.48  

bagus gan..
mampir ke blog ane ya
ha9n.com

20 Februari 2012 pukul 19.14  

Gan tapi knapa di blgo saya tampilnya loading page setelah blog selesai dimuat??

23 Februari 2012 pukul 17.42  

gan, itu gak bisa cuma muncul pertama kali masuk blog kita aja, karena setiap saya klik muncul terus tampilan loadingnya sehingga membuat bosan

24 Februari 2012 pukul 14.16  

@Galih : javascriptnya bentrok dengan javascript yang ada di template, memang kekurangan javascript itu sering terjadi bentrok antar script, baik itu saling meniadakan atau tumpang tindih

@Ugi : kekurangan script ini, kalau gagal memuat isi blog akan menampilkan loading secara terus menerus

9 April 2012 pukul 00.06  

@Mas Dalang
trus solusi untuk masalah seperti mas galih gmn mas?
saya juga begitu masalahnya.

10 April 2012 pukul 02.38  

@Rohmat Julianto backup template, lakukan eksperimen pada blog yang lain - hapus kode jquery yang sebelumya pernah dipasng termasuk yang kode jquery yang berawalan $, kemudian ulangi cara diatas

10 April 2012 pukul 12.41  

mantau terus dah tips"nya di mari..
mantep kawand, keep share tips tips jquerynya.. ;)

18 April 2012 pukul 17.44  

gan ini bikin berat blog gak
??

19 April 2012 pukul 02.00  

@Arie Nuerhansyah berat atau tidak tergantung kecepatan koneksi, keuntungan dari menggunakan script ini, halaman akan tampil keseluruhan setelah efek loading page selesai, kekuranagnya, jika koneksi internet lambat, halaman akan gagal dimuat

19 April 2012 pukul 18.23  

OK GAn

6 Juni 2012 pukul 19.56  

Bagus Gan..
Gan gw iri dengan template blog anda
bisa di kasih tau gak ? bkin template jdi kyak pxa anda ??

6 Juni 2012 pukul 21.11  

@Cheater Community banyak element yang saya modifikasi, terutama bagian css-nya dan ada beberapa bagian html yang saya hapus dan saya tambah...tapi secara garis besar sudah saya share caranya

Anonim
5 November 2012 pukul 13.20  

link untuk demo rusak mas.

Anonim
19 Maret 2013 pukul 14.57  

Demo nya sudah expired bro , tolong di perbaiki ... Thx

3 Juni 2018 pukul 01.49  

Terimakasih.. info nya sangat bermanfaat. :)
My blog
My Campus

Posting Komentar

supaya diskusi berjalan baik, gunakan tombol jawab untuk reply. penggunaan tombol jawab, jangan menghapus kode komentar pada kotak komentar, cukup mengetikan komentar disebelah atau dibawah kode komentar. Terima kasih.

rate this post
beri nilai posting ini
Terima kasih,
Ping your blog, website, or RSS feed for Free Web DirectoryMy Ping in TotalPing.comBloggers - Meet Millions of Bloggers
Protected by Copyscape Duplicate Content Check

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

101011  ©Situseo Blog | Powered by Blogger | Back to Top