Membuat Efek Animasi Preloading Blog di Blogger

Membuat Efek Animasi Preloading Blog di Blogger - Setiap blogger pasti ingin mempunyai sebuah blog yang menarik dimata para pengunjung blognya, oleh karna itu tidak heran apabila setiap blogger berlomba-lomba mendesign blog mereka sedemikian rupa untuk mendapatkan hasil blog yang indah dan maksimal.

Dan pada kesempatan kali ini, saya ingin membantu anda yang ingin mempercantik tampilan blog anda, dengan menambahkan efek animasi loading pada blog anda. Efek animasi ini akan muncul setiap kali halaman blog anda dibuka. bisa dibilang ini efek preloading untuk blog anda, yang bisa membuat blog anda terkesan lebih indah.

Untuk Demo Klik Disini.

Untuk Membuat Efek Animasi Preloading Blog di Blogger.
bisa ikuti langkah-langkah dibawah ini:

1. Masuk ke akun Blogger
2. Pilih Template > Edit HTML
3. Cari kode </body> dan paste kode berikut tepat diatasnya, lalu simpan template.

 <style>
#semua-tutorialku-page-loader {
        position: fixed!important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSfN1kVbLjxQDjXcjJ4ZlFbNA3ycyGkRSy3M9Pn3sQ7yyNNRr3j0lkNDM5T4Gjbwj87cfczPL4icgUmk6Yu_VAeq9mEyBUlaiBifvrjAryTq_aOgqXYf-TTBN6sd7nNmly9kYi9NXk86M/s200/load6.gif') no-repeat 50% 30%;
        color: #FFF;
        display: none;
        font: 0/0 a;
        text-shadow: none;
        padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="semua-tutorialku-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`
    $('#semua-tutorialku-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script> 

Selesai. Sekarang anda sudah Membuat Animasi Efek Loading Blog di Blogger dan siap untuk digunakan. Anda bisa langsung melihat hasilnya dengan membuka halaman blog anda.

Semoga bermanfaat..