Membuat efek loading blog Ala kang ismet ~ blog sepot

Membuat efek loading blog Ala kang ismet

Selamat malam sahabat Blog Irvan Efendy, Pada malam yang sunyi ini saya akan membagikan trick yang lumayan keren yaitu "Membuat efek loading Blog Ala kang ismet"

Simak langkah² dibawah ini:

1. Login ke akun blogger anda

2. Klik Template » Edit HTML

3. Tambahkan kode CSS berikut ini diatas 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/AVvXsEjQlhBXpXEqn17FWLuDAnxljTNdEAt9EtTIuCvP6pAcJvnl_PCmhhgT_DUcEtagwA-MPI7XoHFzEXNy74Huc8393rcEY1ZNA1qUq6HjkxzGlrmqb1h_W8Y0VrVdNqiPwY3BECsBWtZG52g/s200/load6.gif") no-repeat 50% 50%;
    padding:1em 1.2em;
    display:none
    }

4. Masukan kode JQuery di bawah ini 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 template blog sobat sudah terpasang kode JQuery di atas Abaikan saja untuk langkah Ke- 4 ini (Tidak usah di pasang)

5. Masukan kode Javascript di bawah ini 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>

6. Kemudian Simpan template sobat dan Lihat hasil nya

Okeyy,.. sekian dulu tutorial yang bisa saya sampaikan malam ini,..
Semoga tutorial ''Membuat efek Loading Blog Ala kang ismet'' ini bermanfaat bagi sobat semua nya,..

Terima kasih telah membaca artikel tentang Membuat efek loading blog Ala kang ismet di blog blog sepot jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.