Jika postingan sebelumnya Membuat status loading di blog part 1 yang memfaatkan javascript, sekarang saya akan share Membuat status loading part || yang memanfaatkan jquery, yang nemu dari postingan Paul Santosh, Dan yang loading versi 2 ini agak sedikit beda dengan yang versi 1, yang kedua ini loadingnya akan terus muncul dan akan hilang jika semua halaman blog telah di muat. Nah dari pada penasaran silahkan anda lihat demonya.
DEMO
Nah gimana apa sudah lihat demonya, gimana menurut anda....?? kalau mau membuat seperti itu cukup mudah
1. Masuk ke blog anda
2. Klik Rancangan / Template
3. Klik Edit HTML
4. Cari kode
</head>5. Simpan kode di bawha ini di atas kode
</head><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<script type="text/javascript">
(function($){$("html").removeClass("v2");
$("#header").ready(function(){
$("#progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){
$("#progress-bar").stop().animate({ width: "75%" },1500) });
$(window).load(function(){
$("#progress-bar").stop().animate({ width: "100%" },600,function(){
$("#loading").fadeOut("fast",function(){
$(this).remove();
});
});
});
})(jQuery);
</script>Setelah itu scroll ke atas temukan kode
]]></b:skin> setelah ketemu simpan kode di bawah ini di atas kode ]]></b:skin>#loading {
position: fixed;
z-index: 50;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #7f7f7f url(http://1.bp.blogspot.com/-afEfs9hw8xc/TfyEznxQMeI/AAAAAAAACpg/BPDflpxVa2Q/s400/naruto_png.png) no-repeat left center;
line-height: 350px;
text-align: center;
font-size: 36px;
color: #FFF;
}
.v2 #loading {
display: none
}
#progress-bar {
position: absolute;
top: 0;
left: 0;
background: #eee;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: 0.8;
width: 0;
height: 18px
}
#loader {
background: transparent;
height: 100%;
display: block
}Nah tinggal satu langkah lagi nih cari kode
<body> setelah ketemu SIMPAN kode di bawah ini, Di Bawah kode <body><div id='loading'><div id='progress-bar'></div><div id='loader'>Halaman Lagi Loading...</div></div>
Setelah itu klik SIMPAN TEMPLATE dan lihat Hasilnya, Oh iya ada satu lagi nih jika anda ingin menggunakan Halaman Loading ini di BERANDA saja, jangan gunakan kode di atas silahkan gunakan kode di bawah ini
<b:if cond='data:blog.url == data:blog.homepageUrl'><div id='loading'><div id='progress-bar'></div><div id='loader'>Halaman Lagi Loading...</div></div> </b:if>
Nah setelah itu klik SIMPAN.
