Cara Membuat Loading Progres Bar Seperti IOS 7 di Blogger

Pada kesempatan kali ini saya mau mencoba berbagi Cara Membuat Loading Progres Bar Seperti IOS 7 di Blogger. Loading ini sama halnya kita memasang loading pada umumnya cuman style nya yang mirip IOS 7 membuatnya sangat menarik.

Nah jika kamu berminat untuk loading progres bar ini silahkan ikuti langkah langkahnya dibawah.
Langkah pertama login dahulu ke blogger sobat
Langkah kedua masuk ke menu Tema dan Edit HTML
Langkah ketiga salin kode dibawah dan tempatekan tepat diatas </body>

<style>
#page-loader {
        position: fixed!important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsX3vZ9BL_lvOwe91tZZdmkE-dHyKe8gwxy-S6WTwc2-UnqrJszhWNmYYCRlxElyRd6ZfzNHMfQsBTzlMr8qrT05ZJN5inNIOdn0s8kfpz-1FJH0wqgurB-Y09UzL5tHR9whAdvBTucI6V/s1600/iOS7Loader.gif') no-repeat 50% 30%;
        color: #000;
        display: none;
        font: 0/0 a;
        text-shadow: none;
        padding: 1em 1.2em;
}
</style> 
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`
    $('#page-loader').fadeIn(000).delay(6000).fadeOut(000);
});
//]]>
</script>
Simpan template dan lihat hasilnya.

Sekian tutorial Membuat Loading Progres Bar Seperti IOS 7 di Blogger, jika ada kesulitan atau hanya sekedar bertanya, silahkan berkomentar ya.

Comments