Memasang Effect Loading Page yang Elegant di Blog

Jumpalagi di Ciskulnet, udah beberapa bulan gak buka blog akhirnya bisa lanjut bikin tutor lagi :). Tutorial kali ini mengenai Cara Memasang Effect Loading Elegant di Blog.

Fungsi dari efect Loading Page adalah sebagai pemanis atau untuk memper cantik tampilan blog kita ketika terjadi transisi page atau perpindahan halaman.
Pada tutorial kali ini kita akan menggunakan CSS dan Jquery yang tidak akan memperberat blog kita, jadi kamu tidak usah menghawatirkannya.
Untuk memasang efect loading page ini silahkan masukan script berikut diatas code </body> 

 <script type="text/javascript">
    //<![CDATA[
    $(document.body).append('<div id="page-loader">
Loading...</div>
');
    $(window).on("beforeunload", function() {
        $('#page-loader').fadeIn(1000).delay(9000).fadeOut(1000);
    });
    //]]>
    </script>

Setelah itu Letakan script berikut diatas ]]></b:skin>

#page-loader {position:fixed!important;position:absolute;top:0;right:0;bottom:0;

left:0;z-index:9999;background:#fff url('http://2.bp.blogspot.com/-kIrasdB82T0/U6eA_bnDmlI/AAAAAAAADzw/UUio00Tw4gM/s1600/Loader2.gif') no-repeat 50% 50%;color:#fcfcfc;padding:1em 1.2em;display:none;}

Klik simpan dan lihat hasilnya

 Untuk mengubah gambar loadingnya silahkan ganti code berwarna merah dengan link gambar berikut:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5vdByFGHj5Dhp5fNt2Kkr4yxaOb1pcHiy0WvDeKUanGSSnfzj0HhaVkeNjuLZ949MU5oaL5WEaYJ54d3stgPrzIcf1OZ1bme28k1AZdBXU5YailqUKNXaYqKmuebcfwKTfD5bhleuY9g/s1600/loading1+(1).gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSmJbXuxS0jrDVctsCl8rb8UQ31t5lEQnDzywz4V85-b1iqTT_sb3DDFhb5EnLu5w3_kiR4seI3l6VWOVOc9_2BiAdeGOad1Wq-3B63Ahflwo0xxj0FcF0BxJD1sSQ5ubhzNfPCezq3Bk/s1600/Loader1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLOUOxTmZjiEQmevaprcRffNeT40nmZPTnTKLTE7WpABRKkGkfuy3D7R2Z1ccx3SHWkMhVjjBuDIldE66Pljvsp61IQixBs4XxQOiOQ4b8rvhAFiL2_Ij32mzzqWQzHjwU5I9Di6YWvVQ/s1600/Loader3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgROpDJVrKDjPC-XYj602TLNYfIwXx1C3WhvqkpKwUP-oZyNjTg7IgQDOijSB8KTV31NgKu1mCeOCmwuxNkBan881-geGuePRCeRPlBWjNvsS-_ud-2NoIE_piLCLS0DDClGxeWLcXedlI/s1600/Loading5.GIF

Kalo ada kendala jangan ragu untuk berkomentar ya :)