Cara membuat Efek Loading Blog Seperti Windows 8 Keren

Apakah anda bosan dengan efek loading di blog anda ? Jika kalian bosan dan ingin menggantinya saya punya beberapa efek loading di blog, Langsung saja Ikuti langkah - langkahnya di bawah ini :  
Langkah - langkah membuat efek loading blog : 
1. Masuk ke Dashbor Blogger anda
2. Masuk ke menu Template >> Edit Template
3. Sekarang cari kode ]]></b:skin> agar lebih cepat gunakan tombol Ctrl+F pada keybord 
4. Copy dan Pastekan kode di bawah ini tepat di atas kode ]]></b:skin>

_______________________________________________________________________

/*  Irfan Page Loading Effect ( http://www.irfand.com) */
#mbl-lazyloading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #FDFEF8 url(http://i1273.photobucket.com/albums/y416/muhammadirfand/windows8loadingblackoriginal_zps20d6fae5.gif) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
}
.MD #mbl-lazyloading { display: none; }
@media only screen and (device-width: 768px) {
    #loading {
        position:absolute;
        width:1040px;
        min-height:768px;
    }
}
#mbl-progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #de1301;
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#mbl-loader {
    height: 100%;
    display: none;
}

_______________________________________________________________________

5. Cari kode </head>

6. Pastekan kode di bawah ini tepat di atas kode </head>

     _____________________________________________________________________

<script>
(function($){
$("html").removeClass("MD");

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

$(window).load(function(){
    $("#mbl-progress-bar").stop().animate({ width: "100%" },600,function(){
        $("#mbl-lazyloading").fadeOut("fast",function(){ $(this).remove(); });
    });
});
})(jQuery);
</script> 

 

______________________________________________________________________________ 

7.  Cari kode </body> dan pastekan kode dibawah ini tepat di atas kode </body> .Kode ini hanya menampilkan efek loading page hanya pada home page saja, hapus kode <b:if cond='data:blog.url == data:blog.homepageUrl'> untuk menampikan efek loading page di semua halaman

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='mbl-lazyloading'><div id='mbl-progress-bar'></div><div id='mbl-loader'>This Loading Effect is Powered By<a href="http://Poetra86.blogspot.com">Poetra86</a></div></div></b:if>