Membuat Efek Loading di Blog

Kali ini saya akan membagikan Trick blogger untuk sobta blogger di seluruh indonesia yang saya bagikan ini dengan judul "Membuat Efek Loading di Blog". Bagi sobat yang ingin memasang Efeck Loading ini di Blog sobat silahkan simak dengan baik - baik ya sob.

Langkah Pertama : Buka Blogger > Template > Edit HTML

Langkah Kedua : Masukan kode CSS di bawah ini tepat di atas ]]></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/AVvXsEhITJd6vbNJkP2S2zW5w-oxyJEXhSzhwSSr8-WdQE6-B8wUXu7WjOfuO3YsdgoGT6E7cLd9f8HA70hypBj_JvSYBM9ac_K_TIg_i0SMbiRJ0lp-RozqBY7Fd6dOG_2Q2S1O88KjuiHD9mE/s200/load6.gif") no-repeat 50% 50%;
    padding:1em 1.2em;
    display:none
    }

Langkah Ketiga : Masukan kode di bawah ini tepat di atas </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 sobat telah dipasangkan Libs/Jquery.

Langkah Keempat : 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"></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>

Langkah Terakhir : Simpan template sobat...

Semoga bermanfaat bagi sobat blogger semuanya.....

Posted by Admin

Tweet