Cara Membuat Efek Loading Blog

Cara Membuat Efek Loading Blog - Tutorial ini diadobsi dari  ke blognya Kang Ismet pasti udah tau dong Efek Loadingnya  Nah, sekarang saya akan ngasih tau cara buatnya :D

1. Buka Blogger > Template > Edit HTML

2. Copy kode di bawah ini, lalu paste di atas kode ]]></b:skin> atau </style>

#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/AVvXsEi5qgLUJ8Z0KOVdYXdANUl9jfJkM66B2JoNHcE10HGNnwj3ClZEU1rxywYu4eN0ypiCxUy7ZlfLkHcDvitKiVxyH5qklMb-6ocxR10RLQTCjug6z_oEEBQ77nUzS_09BIPM4Gm_q1JCnIM/s200/load6.gif") no-repeat 50% 50%;
    padding:1em 1.2em;
    display:none
    } 

3. Copy kode di bawah ini, dan paste di atas kode </head>

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

Note : Lewati langkah ketiga, jika template blog kalian telah dipasangkan Jquery.

4. Masukan kode di bawah ini tepat di atas </body>

<script type='text/javascript'>
    //<![CDATA[
    // Menyisipkan markup tabir animasi
    $(document.body).append('<div id="page-loader">Loading...</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. Terakhir, simpan template :D

Sekian posting saya kali ini, jangan lupa Like/share/komentar ya... Semoga Bermanfaat ^_^

Anda sedang membaca artikel tentang Cara Membuat Efek Loading Blog Anda juga dapat menemukan artikel Cara Membuat Efek Loading Blog ini dengan url http://tutorialbelajarblogger.blogspot.com/2015/04/cara-membuat-efek-loading-blog.html, juga bisa menyebar luaskannya jika artikel Cara Membuat Efek Loading Blog ini dianggap bermanfaat bagi teman-teman.