Loading Page With jQuery

Loading Page With jQuery - Halo sobat blogger, apa kabar ? pasti baik donk, sebelum ke tutorial, kita awali dengan sedikit dengan penjelasan tentang tutorial ini. Perlu kita ketahui, jQuery adalah sebuah Elemen yang digunakan untuk memberikan efek² tertentu, seperti Show/Hide, dll salah satunya efek memudar lalu menmudar lalu menghilang .fadeOut () dan dari Hilang ke memudar lalu muncul .fadeIn () itu semua disebut Event jQuery, masih banyak hal² atau event² yang dapat dilakukan jquery, tapi yang kita manffatkan hari ini adalah event di atas, selain event² di atas, ada juga .delay () dan .hide (), oceh  langsung aja ke tutorialnya sobat.

1. Login Blogger Anda
2. Rancangan --> Edit HTML
4. Carilah Tag ]]></b:skin>
5. Masukan Code CSS di bawah ini tepat di atas tag ]]></b:skin>

#page-loader {
  position:fixed;
  top:0;
  left:0;
  background-color:#fff;
  z-index:9999;
  text-align:center;
  width:100%;
  height:100%;
  padding-top:70px;
  font:bold 50px Calibri,Arial,Sans-Serif;
  color:#000;
  display:none;
}

6. Kemudian, masukan Code HTML ini di atas Tag </body>

<div id="page-loader">
Loading...</div>

7. sampai disini jangan di Save Dulu sobat, Masukan Script jQuery di bawah ini di atas Tag </head>

$(function() {
    var siteURL = "http://" + top.location.host.toString();
    var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../'], a[href^='#']");
    $internalLinks.click(function() {
        $('#page-loader').fadeIn(1500).delay(6000).fadeOut(1000);
    });

    // Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'
    $('#page-loader').click(function() {
        $(this).hide();
    });
});

8. Simpan Template and klik salah satu link yang gk ada target='_blank'.
9. Selamat Mencoba :D semoga sukses ya

Referensi