√ jQuery Loading Page Effect

jQuery Loading Page Effect

Wednesday, 30 November 2011

Jika sebelumnya saya pernah posting tentang Loading Page trick For Blogspot, Wordpress & more. Kali ini saya mau share bagaimana membuat jQuery Loading Page Effect pada HTML ataupun pada blog kita. Efek yang di berikan pada script jQuery ini adalah, Efek Blur Pada saat membuka halaman yang kemudian lama kelamaan menjadi terang seperti biasa.

Jika masih ada yang bingung bisa langsung lihat hasilnya berikut ini :

PREVIEW DEMO

Ok langsung saja kita praktekkan bagaimana script dan penerapannya :D :

Yang pertama adalah letakkan jQuery script di dalam tag <head> , Jika yang sudah memakai script jQuery tidak perlu di tambahkan lagi. Namun jika ada yang belum punya bisa memakai script berikut
```
http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js . 
```
Kedua letakkan script berikut tepat di atas kode </body> atau di bawah kode </head>

<script type="text/javascript">
     $(document).ready(function(){
        $('#page_effect').fadeIn(5000);
     });
     </script>

Ket : Ganti angka 5000 untuk mengatur berapa lama efek blur terlihat

Kemudian tambahkan kode berikut tepat di bawah kode <body>
```
 <div id="page_effect" style="display:none;">
```
Dan terakhir tambahkan kode </div> tepat di atas kode </body>
```
 
```

Jika langkah di atas telah selesai maka sudah pasti kamu akan berhasil membuat jQuery Loading Page Effect. Sebagai contoh susunan yang benar silahkan lihat di bawah ini :

<html>
<head>
<title>JQuery Page Loading Effect</title>
<script type="text/javascript" src="
http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js
"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
    $('#page_effect').fadeIn(5000);
});
</script>
<body>
<div id="page_effect" style="display:none;">
<h1>JQuery Page Loading Effect</h1>
    This is page loading effect with JQuery 1<BR>
    This is page loading effect with JQuery 2<BR>
    This is page loading effect with JQuery 3<BR>
    This is page loading effect with JQuery 4<BR>
    This is page loading effect with JQuery 5<BR>
    This is page loading effect with JQuery 6<BR>
    This is page loading effect with JQuery 7<BR>
    This is page loading effect with JQuery 8<BR>
    This is page loading effect with JQuery 9<BR>
    This is page loading effect with JQuery 10<BR>
    This is page loading effect with JQuery 11<BR>
    This is page loading effect with JQuery 12<BR>
    This is page loading effect with JQuery 13<BR>
    This is page loading effect with JQuery 14<BR>
</div>
</body>
</html>

Selesai sudah. Sekarang tampilan blog atau website kamu sudah semakin apik. Lihat HASILNYA dan rasakan bedanya. Semoga berhasil ;) .