Cara Membuat Efek Loading di Blog

Caralukman - Kali ini saya ingin berbagi  Cara Membuat Efek Loading di Blog, jadinya saat kita ngeklik suatu artikel akan ada efek loadingnya, contohnya diblog saya ini. Mungkin efek loading blog ini tidak perlu bagi blog, tetapi jika sobat ingin terapkan silahkan sobat bisa langsung copas saja scipt di bawah ini sebelum kode ]]></b:skin> :

How To Make Loading Effect :

  • Masuk dulu ke Blogger
  • Pilih Template > Edit HTML 
  • Taruh Kode Dibawah ini diatas kode </style> atau ]]></b:skin>
#page-loader {
    position:fixed !important;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:999999;
    background: #303030 url("http://3.bp.blogspot.com/-sW166HTPK4U/UY2kVNdjsFI/AAAAAAAAEHk/fIO-B-mOeCE/s200/load6.gif") no-repeat 50% 50%;
    padding:1em 1.2em;
    display:none
    }
  • Masukkan kode dibawah ini diatas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
Kalo Jquery sudah ada di blog agan, langkah ini dilewati saja
  • Masukkan kode dibawah ini diatas 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>
  • Yang terakhir Save template, Selesai

24 Responses to "Cara Membuat Efek Loading di Blog"

  1. wuih, keren banget effek loading nya gan..
    izin nyobain ya :)

    ReplyDelete
  2. kalau gambar loading nya diganti bisa ga min ?

    ReplyDelete
  3. keren gan, ane mau praktekin di blog berhubung blog ane kagak punya efek loading ;)

    ReplyDelete
  4. mantap bget gan, apa gk berat nih ntar loading blognya ??

    ReplyDelete
  5. Ngak dong, klo blog agan wuss mah wuss aja :D

    ReplyDelete
  6. cara buat gambarnya sendiri gimana gan? :/

    ReplyDelete
    Replies
    1. Diphotoshop .png atau nyari digoogle bisa :D

      Delete
  7. artikelnya sangat bagus kawan

    http://acemaxs31.com/obat-kanker-paru-paru/
    http://apotekgumilar.com/
    http://acemaxs86.com/

    ReplyDelete
  8. bisa gak dibuatin tutorial biar gampang mempelajarinya ?

    ReplyDelete
  9. Izin coba ya gan

    ReplyDelete

/**************** READ ME ****************/

---> Blog ini menggunakan Sistem DoFollow, jadi manfaatkan kesempatan ini untuk komentar menggunakan Anonymous atau Name/URL <---

-----------------------------
NB: Selama Bukan Mengandung Pornografi/Unsur Kekerasan
-----------------------------