CARA MEMBUAT EFFECT LOADING BLOG DI BLOGGER

By Yusuf T

Cara Membuat Efek Loading Blog - Tutorial ini diadobsi dari  ke blognya Kang Ismet pasti udah tau dong Efek Loadingnya  Nah, sekarang saya akan ngasih tau cara buatnya :D

1. Buka Blogger > Template > Edit HTML
2. Copy kode di bawah ini, lalu paste di atas kode

]]></b:skin> atau </style>

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

3. Copy kode di bawah ini, dan paste di atas kode </head>

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


Note : Lewati langkah ketiga, jika template blog kalian telah dipasangkan Jquery.
4. Masukan kode di bawah ini tepat di atas </body>

    <script type='text/javascript'>
        //<![CDATA[
        // Menyisipkan markup tabir animasi
        $(document.body).append('<div id="page-loader">Loading...</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>

5. Terakhir, simpan templateblog kamu, selesai... mudah bukan!.....

Demikianlah postingan saya tentang cara membuat efek loading pada blog di blogspot, semoga bermanfaat.

Sumber: https://tutorialbelajarblogger.blogspot.co.id/2015/04/cara-membuat-efek-loading-blog.html

Taruh disini

Bagikan ke Facebook Tweet ke Twitter Publikasikan ke Google+