Cara Buat Animasi Loading pada Blog yang keren dan mudah

Motivator sakti dari pada bete nungguin mendingan berbagi ilmu lagi nih!Langsung aja deh sekarang saya mau berposting tentang Cara Buat Animasi Loading Di Blog yang keren dan mudah tetapi kali ini animasinya beda dari yang lain pokoknya keren deh.. ini adalah sreenshotnya:

Gemana? keren kan.. oke langsung aja nih caranya

• Buka editor Template dengan cara mengeklik Template > Edit HTML > Lanjutkan
• Cari Kode </head> Agar mudah dalam pencarian tekan Ctrl+f, dan sisipkan kode di bawah ini Tepat di atas </head> .

<style>
/*  henry-multimedia-informasi.com */
#md-loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #FDFEF8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiorD2ZJWHAMQ4dYbhgQuhSt8rTIlegE7_Ev23OIweqGw37l5jh2esA4i4HHMJ1gGh1NW3t5dWIbQCydRtClva3RhHX6kM01g-rdrBjRgFF9Y0Zbin6Ixew4kbuHFsPKr37x9RiDZ0n22t_/s1600/Bloggertrix-loading.gif) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
}
.MD #md-loading { display: none; }

@media only screen and (device-width: 768px) {
    #loading {
        position:absolute;
        width:1040px;
        min-height:768px;
    }
}
#md-progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #0d5ff6;
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#md-loader {
    height: 100%;
    display: none;
}
</style>
<script>

(function($){

$("html").removeClass("MD");


$("#header").ready(function(){ $("#md-progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#md-progress-bar").stop().animate({ width: "75%" },1500) });


$(window).load(function(){

    $("#md-progress-bar").stop().animate({ width: "100%" },600,function(){
        $("#md-loading").fadeOut("fast",function(){ $(this).remove(); });
    });

});
})(jQuery);
</script>

Ket : 

• Silahkan Ganti Alamat URL yang berwarna MERAH dengan gambar animasi yang Kalian suka

Berikut ada Beberapa ALAMAT URL animasi loading yg mungkin Kalian suka loooo :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSApcza4bk8-UnYK4AO0o_CT_6s55ZJXhGLeZs5uMVjOLXrL1hM0izICRo_Yo8gt-PeO7UorvSqSa6B2j0pV4afnfJK6LZOXjAzNiYnDvpWhWLLDyCafpeL4t6ZVC4cigaYlNRzFNLkRAV/s1600/loading1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu5eFIHGd01mgovpFiT357iiMyDlpwlHpX0s0lFO3SgAvQX-icHoA9sdLCUxvtb4YfY1maOnkTbn0IuBms1qhAJo6bzuhqJpjx4bF0rMHpBYYMOMR1XTxTilHS1PdhvGIki1fdE25WbSKD/s1600/loading2.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3SVuoHnsS0QO92RVr3YKzXlgq0nL4W3IGzA2zar-BFg22UnQ54a0k0-ZK4ZwFnc_42ekzCm5ORL2zBCuAdZHmNImokL4Cn7YSGSuVBDVMpqXMUfVd16rOGbWF613vzk_rm5e7jKCGl4ju/s1600/loading3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5lSf-maTWx8zrTChU7Z9kkh3sOoC1L_EB_sGm1jnEEMPFr5nHGfGkTw0ap2KrQy_QklfFV57i8fkAqIELpWckFYTGeM-cjlkMAO0Jwq5T-3BRAFvrYBPXFe2y9cuxc9mQhAW2MyxeVVm-/s1600/loading4.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNiD4yhe6RWxumWZw1ubtoyt0WM9WdCb0-V_jeh9SJVeCABbk0E_KRnPj-G5aA2v7e8260SHBViQxNHh-iNhTzcfjCd7opima8pWPZ4FQanzS8_g-ZL9E30p_1lM_3_YQTJONE2AxvTFF8/s1600/loading5.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjws71WoJI4E2EX3mVFzNm7PoE5M2C9yKPPMX8lZxMNYSpuMEd3-QrCCpmvz6YgWL4PIIz7K5X52B7mVbLAA-VDj8qP1g1L08yBFmXBAcTtCfVih2p7NKLWbahSgT_Yn1XrxHk1llhRzcJe/s1600/loading6.gif 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgfsCIOsF-l2IDyh5hJtnrC__wE75fRlv1dBB1N-ZLMcf75JVNnVRKfs08gyooiAJU4gHUu1sXbAIyCBH-_5umq_VNIRg4b3_3EvuvkRa9ZpfjclqH_M6Z_m6wId3OANvn3GyiizkZd2vV/s1600/loading7.gif

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHoM1csuIsguBG0INgDtmNkor0xCnKpQWlHsQxThUFBGqQbiv-h31OpTgvpg1eyMQqaOcSVWnavGZ6T9HFPXV2VvF8Y1DgOuiuI9Yq74wVRVK8gG2e2R4C-7r1VwLDcqYTV2AeowtpTDnt/s1600/loading8.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwOfAa9SAikZ5c7y-52e4SlJRoaGCo74OLeos6MOkaxPgb-Of6m7LOBOO-O1TIylF2h6tZZzzEpxOsU7RYr2VcNQ0fpUXeR4_JkREYoBKQMCHTOaaBG4scd7uttjwx2oQYmfWndpsjoWkq/s1600/loading9.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdt9Pe3JXQ1AYia8HUq03O3YzwBrZQxYlGa7D5wpHe3rUJxHtJErVNSnBdTG4mSEwKkwNhUbBya8KzPiGwoBDJgOOG_Jt6yxfzJlKul2c70RBN0YiOV9TQ8r5gWGWtU7ScVzmzez5Qo_rD/s1600/loading10.gif

langkah selanjut nya

Sekarang cari kode <body> agar mudah dalam penacrian tekan Ctrl+f 
dan sisipkan kode di bawah ini Tepat di bawah kode <body> .

<div id='md-loading'><div 
id='md-progress-bar'></div><div 
id='md-loader'>Loading...</div></div>

Bagaimana mudahkan?Oke Cukup sekian, Semoga Bermanfaat..! ^_^