Toturial Cara Membuat Animasi Page Loading Pada Blog

detikjam.com - Pertama-tama, maaf telat posting karena seharusnya di publish kemarin. Maaf membuat anda menunggu (emang ada?). Awalnya saya akan memposting artikel ini sore kemarin, tapi ternyata ada sedikit masalah koneksi internet di rumah. Jadi, baru sempet sekarang..

Sudah 2 minggu yang lalu sejak saya terakhir kali posting tutorial tentang coding. Terakhir adalah tentang Cara Custom CSS & JS Per Post. Kali ini, saya akan kembali dengan coding. Tepatnya adalah mengenai tutorial membuat animasi pre-load keren saat sebuah halaman website dimuat dengan 7 pilihan.

• Silahkan login ke Blogger.com
• Klik Template => Edit HTML
• Cari kode ]]</b:skin> atau </style>
• Paste kode css di bawah ini tepat diatas kode ]]</b:skin> atau </style>

/* Loading Page */
#page-loader{position:fixed!important;position:absolute;top:0;right:0;bottom:0;left:0;z-index:999999;background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj52drLM9znEGm0wZt173lyK2_AZxwvNi6TxaHtb9p1Lzt9DEdiIRU5PsW3oy0myam-0vYvYC-0sPq4ltVvbFutxlBZ8R-qiwktj3JuZUjcSnSD0rVOwzzUvUuGUcoLxY9Dm7AwQp43s7Uz/s128-no/loading.GIF') no-repeat 50% 50%;padding:1em 1.2em;display:none}

• Copy dan Pastekan code di bawah ini tepat di atas </head>

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>

• Cari kode </body>
• Copy kode jQuery dibawah ini, lalu Paste diatas kode </body>

<script type='text/javascript'>

              //<![CDATA[

    // Animasi Loading

     $(document.body).append('<div id="page-loader"></div>');

    $(window).on("beforeunload", function() {

        $('#page-loader').fadeIn(500).delay(5000).fadeOut(1000);

    });
     //]]>

</script>

• Copy dan Pastekab Kode di bawah ini tepat di atas ]]></b:skin>

#page-loader {

    position:fixed !important;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:999999;
    background: #1E90FF url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7UDruLSbZlHJG85DLSYQPSgpB70EYezUAJtmO9DwGtDGGmoXt-pBzPf5QqVbY7c7_ccB78EbIdPLE-0AZuHROVS8uPrT_A4Poznt5VLe4CPcquuBAH_qsIR3d23ZCkrsywy4W9to4Rs0/s200/load6.gif") no-repeat 50% 50%;

    padding:1em 1.2em;

    display:none

    }

Beberapa Gabar Animasi Menurut Kesukaan Anda

Efek Animasi Loading Page 1
https://lh3.googleusercontent.com/bixcnTkh4q4/U7nQUNmm3_I/AAAAAAAAEDU/YE9s5MKfa60/s128-no/Loading7.GIF

 Efek Animasi Loading Page 2https://lh4.googleusercontent.com/Y2S2txttvPw/U7nQPi0h5MI/AAAAAAAAEDU/rsMYnz5-yn0/s128-no/Loading2.GIF

 Efek Animasi Loading Page 3https://lh3.googleusercontent.com/tjFFryWgIcs/U7nQQ0x7JHI/AAAAAAAAEDU/v2BqyuIvCc8/s128-no/Loading3.GIF

Efek Animasi Loading Page 5
https://lh5.googleusercontent.com/-JN0Uo9ud0SY/U7nQSv_HfI/AAAAAAAAEDU/NfHcUkP27QY/w124-h128-no/Loading5.GIF

Efek Animasi Loading Page 6 6https://lh5.googleusercontent.com/sGFHLSRy2OI/U7nQTn34h8I/AAAAAAAAEDU/0PUXPSEACPc/s128-no/Loading6.GIF

EfekAnimasiLoadingPage 7 https://lh4.googleusercontent.com/-1nnz_qzdlE/U7nQPsC7zvI/AAAAAAAAEDU/a3A-LG1mM0I/s128-no/Loading1.GIF

Efek Animasi Loading Page 8
https://lh5.googleusercontent.com/sbG2UKoWYpc/U7nQUtY6YOI/AAAAAAAAEDU/Oc22arnyymc/w128-h54-no/Loading8.GI

Efek Animasi Loading Page 9
https://lh5.googleusercontent.com/H8yWVVQ78Wk/U7nQVZTbQqI/AAAAAAAAEDU/a-aWtzRZlls/s128-no/Loading9.GIF

Efek Animasi Loading Page 10https://lh4.googleusercontent.com/qqEpMJ9PeoI/U7nQOrfprI/AAAAAAAAEDU/YvXcmUbolGc/w128-h40-no/Loading10.GIF

Demikian Toturial Cara Membuat Animasi Page Loading Pada Blog, Semoga Bermanfaat.