Membuat Animasi Loading Page Di Blog

    Berdasarkan permintaan sobat Hasyim Ibnu Hasbullah, kali ini kita akan sama-sama mengetahui bagaimana membuat sebuah animasi loading blog saat pertama kali di buka.

screenshoot ;

Demo


       Untuk membuatnya, ikuti langkah-langkah berikut ;
1. login ke blogger.com
2. pilih Rancangan/Design
3. klik Edit HTML
4. BackUp/Resore Template ----> Download Template Lengkap
5. Edit Template ---> beri tanda centang Expand template widget
6. tekan Ctrl+F, kemudian ketik ]]></b:skin>
7. letakkan kode berikut di atasnya ;

.QOverlay {
background-color: #000000; /*warna background loading*/
z-index: 9999;
}

.QLoader {
background-color: #CCCCCC; /* warna loading bar */
height: 1px;
}

.QAmt {
color:#FF530D; /*warna angka loading*/
font-size:50px;
font-weight:bold;
line-height:50px;
height:50px;
width:100px;
margin:-60px 0 0 -50px;
}

8. dengan cara yang sama seperti langkah no-6, cari code </head>
9. letakkan kode berikut di atasnya ;

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://kangdadang.googlecode.com/files/queryLoaderpre.js' type='text/javascript'/>

10. yang terakhir, letakkan kode berikut di atas code </body>

<script>
QueryLoader.selectorPreload = &quot;body&quot;;
QueryLoader.init();
</script>

11. simpan template

keterangan ;
* langkah no.4 wajib sobat perhatikan (untuk berjaga-jaga bila terjadi error)
* sobat bisa mengganti-ganti kode warna pada komentar berwarna biru

download codenya disini
lihat code warna disini

    Tadinya anak-jelex menggunakan animasi loading page ini untuk mengukur barometer berapa lama (dalam persen) blog sedang di muat. Namun karena adanya saran dari pembaca yang mengatakan bahwa agak sedikit mengganggu, ya sudah akhirnya saya hapus. Pengunjung adalah raja bagi saya. Oleh karena itu, saya akan mempersembahkan yang terbaik untuk nya. ~ salam anak-jelex ~

       Oh ya, udah di coba belum ? di tunggu yach hasilnya... jangan lupa berkomentar. Semoga bermanfaat :)