Membuat Loading Page ala Kang Rian di Blog

Tuesday, January 20, 2015
Membuat Loading Page ala Kang Rian di Blog


Halo sob ^_^ kali ini saya mau ingin berbagi Cara Membuat Loading Page ala Kang Rian di Blog. Oke berikut tutorialnya :3

  • Masuk ke dashboard blog sobat.
  • Pergi ke bagian Template, lalu klik Edit HTML
  • Simpan kode dibawah ini tepat sebelum tag </head>


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

    Note : Jika sobat telah memasang kode jQuery Library versi  lain, maka lewati langkah ini


    • Copy lalu paste CSS dibawah ini tepat sebelum tag </head>
    
    <style>
    /* LOADING HALAMAN */
    #loadingHalaman {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg8XceuuRv-T0YXTKp8MKp3VWaMfEPPsojSctpkyA5fo1xbVClgxTLpZd6z7JGJII53PaTQP1Rpv5Z4I4B18vHofI21iJ0xOsasUix_e_kLuT-UohD2DQBDJcFjFM3j7briF-y7xFMIH2Q/s1600/dark-loading.gif) no-repeat center;
    background-color:rgba(0, 0, 0, 0.32);
    width:100%;height:100%;
    position: fixed; left: 0px; top:0px; z-index: +100000;
    }
    </style>

    • Copy lalu paste HTML dibawah ini tepat setelah tag <body>

      
      <div id="loadingHalaman"></div>
    • Taruh jQuery dibawah ini tepat sebelum tag </body>

    
    <script>
    //<![CDATA[
    //Loading Halaman
    $(window).bind("load", function() {
        $('#loadingHalaman').slideUp(1000);
    });
    //]]>
    </script>
    

    • Terakhir klik Simpan

    Selesai

    Sekian ^_^

      Artikel Terkait

      Previous
      Next Post »

      1 komentar:

      Write komentar
      Thursday, May 14, 2015 Delete This comment has been removed by a blog administrator.
      avatar

      Peraturan berkomentar :

      - Berkomentarlah dengan relevan sesuai artikel.
      - Gunakanlah bahasa yang sopan dan baku.
      - Dilarang menggunakan link hidup.
      - Dilarang menghina dan mencela.
      - Dilarang SPAM!
      - Dilarang mengandung unsur SARA!

      Jika ada yang melanggar, komentar akan langsung saya hapus.


      Terima Kasih Telah Berkunjung ^_^

      EmoticonEmoticon