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>
<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):
