cara membuat halaman loading di blog

Oleh Unknown

Senin, 08 Desember 2014

Bagikan :

Tweet

Kali ini saya ingin berbagi ilmu cara membuat halaman loading di blog.Tidak usah panjang-panjang
langsung kita menuju ke tutorial

Cara ke 1

Login ke blog kamu dulu.

Cara ke 2

Pilih Template Terus Edit HTML

Cara ke 3

Copy kode dibawah ini diatas kode </style> atau ]]></b:skin>

Untuk mencari ]]></b:skin> atau </style>
klik Ctrl+F 

#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/AVvXsEiqgd959vvVnGq6GsivtBVIAysuuU4PrvBdpPo7r24OLXvDCGtKxls4PGUZ4NbcRDFfQhkh_r7HrqmCigUI5aJP5CjNEJrSeffpcLDxGSfdjjxXsG-l2jrbLukk1JGPc8SSN5EpkQmy1n0/s200/load6.gif") no-repeat 50% 50%;
    padding:1em 1.2em;
    display:none
    }

Cara ke 4

Copy 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 kamu lewati saja langkah ini.

Cara ke 5

Copy 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> 

Semoga bermanfaat



  

Share artikel ke :

Facebook Twitter Google+