0
Jika postingan sebelumnya Membuat status loading di blog versi 1 yang memfaatkan javascript, sekarang saya akan share Membuat status loading part || yang memanfaatkan jquery, yang nemu dari postingan System Of Blog, 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. Ok sobat blogger, ga usah panjang lebar cuap -cuapnya. mari kita langsuang ke pokok pembahasan Seperti biasa 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>
6. Setelah itu scroll ke atas temukan kode ]]></b:skin> 7. 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX_qtVSceZAYpqwF4SMk-_lEto8o1_3lD5o0nicCKczBAK0zl83siVELdrEUGH7aSZB3Rly5QOndRdkag5DzdbRmC2WYKdgK2nBllFo9xAYsdrgFju2erCpRyTN2kSINeVzHo2UYX0uAI/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
}
8. Nah tinggal satu langkah lagi nih cari kode <body> setelah ketemu 9. Copy kode di bawah ini, pastekan Bawah kode <body>
<div id='loading'><div id='progress-bar'></div><div id='loader'>Halaman Lagi Loading...</div></div>
10. Setelah itu klik SIMPAN TEMPLATE dan lihat Hasilnya, NB: 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>
Setelah itu klik simpan dan coba sobat lihat hasilnya...
6. Setelah itu scroll ke atas temukan kode ]]></b:skin> 7. Setelah ketemu simpan kode di bawah ini di atas kode ]]></b:skin>
8. Nah tinggal satu langkah lagi nih cari kode <body> setelah ketemu 9. Copy kode di bawah ini, pastekan Bawah kode <body>
<div id='loading'><div id='progress-bar'></div><div id='loader'>Halaman Lagi Loading...</div></div>
10. Setelah itu klik SIMPAN TEMPLATE dan lihat Hasilnya, NB: 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>
Setelah itu klik simpan dan coba sobat lihat hasilnya...
0Awesome Comments!