Banner 468x60

Cara Membuat Efek Loading Blog Ala Kang Ismet

Cara Membuat Efek Loading Blog Ala Kang Ismet






Hey Pengunjung Setia Blog Cyber Creative Kali Ini Admin Mau Post Artikel Yang Keren   " Cara Membuat Efek Loading Blog Ala Kang Ismet "





Ok Kita Langsung Saja Ke Tutor Nya

Ikuti Langkah-Langkah Berikut Ini


  • Log In Ke Akun Blogger Anda
  • Klik Template > Edit HTML
  • Tambahkan Kode CSS Berikut Di Atas Kode ]]></b:skin>
#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/AVvXsEgNEsYD_VdnpYOKVANLeI2-jPyBtUUtWltybLQd7s1A5sq3E0PRQIWhGaVM_x-1ne72LO6aIxb4EnkJw3Mh33OcPdcR0UG7Qw6h-jxh2eou5esJe_Xp3TvPXuwngNdvBc192KxxYCWMJgE/s200/load6.gif") no-repeat 50% 50%;
    padding:1em 1.2em;
    display:none
    }


  • Masukan Kode JQuery Tepat Di Atas Kode </Head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

NOTE: Jika Sudah Terpasang Kode JQuery Di Atas Abaikan Saja Langkah Ke 4 Ini



  • Masukan Kode JavaScript Tepat Di Atas Kode </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>
  • Kemudian Klik Save Deh

Ok Sekian Dulu Tutorial Yang Saya Sampaikan 
Semoga Tutorial Ini Dapat Membantu Dan Bermanfaat Bagi Sobat Blogger


Sumber : Kangismet.net

8 komentar

keren gan, ini bisa gak gan di buat di wordpress?

Ini nih yg ane cari dari dlu, Ijin praktek yo gan. !

Nice post gan :D izin coba.

Mas maaf OOT ! kalau mau ganti font postingan blog kaya punya mas, gimana caranya?