Header Ads Widget

Responsive Advertisement

Memasang Animasi Loading Blog Super Keren


Memasang Animasi Loading Blog Super Keren - Pada tampilan awal blog biasanya di tambahkan animasi loading yang menarik, hal ini dimaksudkan untuk menginformasikan kepada pengunjung blog bahwa data halaman web atau blog sedang dalam proses download dan ektrasi data yang akan di render pada browser. Animasi Loading dibuat menggunakan JQuery sebagai engine script untuk membuat animasi loading blog yang super keren. Pemasangan script ini cukup mudah dan juga dapat dikostumasi sesuai keinginan kita. Buat yang tertarik langsung aja kita ke TKP...

Cara Pemasangan :
  • Login ke blog sobat...

  • Klik "More Options" selector box kemudian klik "Template" setelah itu pilih "Edit HTML".

  • Apabila anda sudah memasang kode JQuery silakan anda lewati bagian ini. Cari kode </Html> kemudian letakan kode berikut ini tepat diatas kode </Html>.

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

  • Cari kode </Body> kemudian letakan kode berikut ini tepat diatas kode </Body>.
    <style type='text/css'>
    #page-loader {
      position:fixed !important;
      position:absolute;
      top:0;
      right:0;
      bottom:0;
      left:0;
      z-index:9999;
      background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOlmyIIH-gqEOMwxv8QlxehfnFhO194VdAAKMGx298SJ7o6HO0ru_JsoCMx6Fh6MlPodmejIg3aqvhz_VLTH_myqlKvKNm3N-KREORKQ5imy7cLnvi9S4QtnVP4tbdqJHpBJeCXqpAbLQ/s1600/loadinfo.net+%284%29.gif') no-repeat 50% 50%;
      color:white;
      padding:1em 1.2em;
      display:none;
    }
    </style>
    <script type='text/javascript'>
    //<![CDATA[
    $(document.body).append('<div id="page-loader">Loading...</div>');
    $(window).on("beforeunload", function() {
        $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
    });
    //]]>
    </script>
    

  • Catatan :
    • Kode berwarna biru merupakan URL gambar animasi.
    • Untuk pilihan animasi loading blog lainnya silakan anda kunjungi cssload.net.
  • Klik "Save" dan lihat hasilnya.

Oke sobat monozcore apabila ada pertanyaan seputar pemasangan widget ini silakan tanyakan di kotak komentar... have a nice day...

.: Semoga Bermanfaat :.

Post a Comment

0 Comments