Cara membuat animasi loading seperti Kang Ismet

Oleh Unknown

Senin, 09 Juni 2014

Bagikan :

Tweet

Sahabat Kang PP, kali ini Kang PP akan membahas tentang "Cara untuk membuat animasi loading seperti Blog kang Ismet". Animasi atau efek loading seperti Kang Ismet ini memang simple tapi keren, Kang PP juga memakainya.
Berikut tutorialnya cara membuat animasi atau efek loading blog seperti Kang Ismet :

1.   Masuk ke blogger.com > Template > Edit HTML
2.   Tekan CTRL+F (Di dalam kotak script), ketikan ]]></b:skin> , jika ketemu silahkan tambahkan kode berikut tepat diatasnya,

 #page-loader {
    position:fixed !important;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:999999;
    background: #303030 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaDM-c345jm-rLSc88CwyiwGG5giXMeTFX0f8PpoSBP2jqToMd6dBUgi_kVNnKZedyKu2vESzR9MHb4gt8hFRxX_UWJQAPtpdxn3x5zHTNJ2PvWHnyDRIvmG60EIqQbmvBsh7Wdnzm5cs/s200/load6.gif") no-repeat 50% 50%;
    padding:1em 1.2em;
    display:none
    } 

3.   Lalu masukan kode JQuery berikut ini di atas kode </head>

 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/> 

*jika di blog anda sudah anda kode ini, maka lewatilah.

4.  Selanjutnya cari lagi kode </body> , lalu pastekan kode berikut diatasnya

 <script type='text/javascript'>
    //<![CDATA[
    // Menyisipkan markup tabir animasi
    $(document.body).append('<div id="page-loader"></div>');
    // Saat halaman aktif terpicu untuk berpindah/keluar menuju halaman lain...
    $(window).on("beforeunload", function() {
        // ... tampilkan tabir animasi dengan efek `.fadeIn()`
        $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
    });
    //]]>
    </script> 

5.  Klik simpan template, jika ragu anda bisa pratinjau dulu.  Selesai

KETERANGAN :

1. Jika ingin mengganti gambar animasi loadingnya, lihat kode CSS, lalu ganti URL https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaDM-c345jm-rLSc88CwyiwGG5giXMeTFX0f8PpoSBP2jqToMd6dBUgi_kVNnKZedyKu2vESzR9MHb4gt8hFRxX_UWJQAPtpdxn3x5zHTNJ2PvWHnyDRIvmG60EIqQbmvBsh7Wdnzm5cs/s200/load6.gif dengan URL gambar selera anda.
2. Kode JQuery, itu kode yang Kang PP pakai. Jika menggunakan kode JQuery lain namun tidak jalan, pakailah kode diatas.
3. Untuk mengubah waktu terlama animasi loadingnya, anda dapat membuat lama dengan ganti Delay(6000). [6000 samadengan 6 detik]

Sekian tutorial cara untuk membuat efek animasi loading seperti Blog Kang Ismet.

[Pustaka : Blog Irvan Efendi ]

Tag : Tutorial Blog