Hallo sobat blogger jumpa lagi diblog DH-F kali ini saya akan bagikan satu trik blog atau desain blog lagi kepada anda semua yang senang mendesain blognya agar terlihat menarik, yaitu cara memasang Efek loading keren pada blog Efek ini dibuat dari "Javasript" dan "Css". Langsung liat aja screenshotnya dibawah ini.

Cara Memasangnya :

1. Buka dashboard > Template > Edit Html > Centang Expand widget.
2. Cari kode ]]></b:skin>. dan tambahkan kode Css berikut diatasnya.

#loadhalaman {
    position: fixed;
    opacity: 0.93;
    top: 0;
    left: 0;
    background-color: #000;
    z-index: 9999;
    text-align: center;
    width: 100%;
    height: 100%;
    padding-top: 20%;
    color: #000;
    display: none;
}

.loadball {
    background-color: transparent;
    border: 5px solid rgb(240 ,0 , 0);
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-radius: 50px;
    box-shadow: 0 0 35px rgb(255 ,0 , 0);
    width: 50px;
    height: 50px;
    margin: 0 auto;
    -moz-animation: spinPulse 1s infinite ease-in-out;
    -webkit-animation: spinPulse 1s infinite linear;
}

.loadball-2 {
    background-color: transparent;
    border: 5px solid rgb(240 ,0 , 0);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-radius: 50px;
    box-shadow: 0 0 15px rgb(255 ,0 , 0);
    width: 30px;
    height: 30px;
    margin: 0 auto;
    position: relative;
    top: -50px;
    -moz-animation: spinoffPulse 1s infinite linear;
    -webkit-animation: spinoffPulse 1s infinite linear;
}

@-moz-keyframes spinPulse {
    0% {
        -moz-transform: rotate(160deg);
        opacity: 0;
        box-shadow: 0 0 1px rgb(255, 0, 0);
    }

    50% {
        -moz-transform: rotate(145deg);
        opacity: 1;
    }

    100% {
        -moz-transform: rotate(-320deg);
        opacity: 0;
    }
}

@-moz-keyframes spinoffPulse {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spinPulse {
    0% {
        -webkit-transform: rotate(160deg);
        opacity: 0;
        box-shadow: 0 0 1px rgb(255, 0, 0);
    }

    50% {
        -webkit-transform: rotate(145deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: rotate(-320deg);
        opacity: 0;
    }
}

@-webkit-keyframes spinoffPulse {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
} 

3. Kemudian Cari kode </head> dan tambahkan kode berikut diatasnya.

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

4. Selanjutnya Cari kode </body>. dan tambahkan kode berikut diatasnya.

<div id='loadhalaman'>
    <div class='loadball'></div>
    <div class='loadball-2'></div>
</div>
<script type='text/javascript'>
    $(function () {
        var siteURL = "http://" + top.location.host.toString();
        var $internalLinks = $("a[href^='" + siteURL + "'], a[href^='/'], a[href^='./'], a[href^='../']");
        $internalLinks.click(function () {
            $('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000);
        });

        // Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'
        $('#loadhalaman').click(function () {
            $(this).hide();
        });
    });
</script>

Okey saya rasa cukup sampai disini tutorial kita kali ini tentang cara memasang Efek loading keren pada blog semoga bermanfaat bagi anda semua. Thanks