Membuat effect loading bar di blogspot

Sekarang ane mau share gimana cara membuat loading bar di blog, gunanya untuk apa? untuk ngehias blog aja sih :D. biar kelihatan lagi loading gitu :p.

Langsung saja :
1. Masuk ke Dashbor Blogger anda
2. Masuk ke menu Template >> Edit Template
3. Sekarang cari kode ]]></b:skin> dengan menggunakan bantuan Find (F3 atau Ctrl+F)
4. Copy dan Pastekan kode di bawah ini tepat di atas kode ]]></b:skin>

/*  masjhoko.com halo bro */
#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, 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'>Loading please waiting...<a href="http://www.masjhoko.com">Mj</a></div></div></b:if>

Sekarang untuk mengganti effek loading pagenya, tinggal ubah link gambar yang berwarna biru dengan link kamu, atau bisa memilih gambar loading dibawah ini (klik kanan pada gambar dan copy link image):