weLcome To Dai-detected

Membuat efek loading halaman blog

Bagikan ke Teman! :


Posting kali ini sangat sederhana..

menambahkan efek loading halaman jQuery untuk blogger

ya mungkin udh pada banyak di blog2 lain :D

Demo

jika Anda ingin Membuat efek loading ke halaman blog anda
cukup ikuti langkah sederhana di bawah ini ...


seperti biasa :
Blogger > --- Template ---> Edit HTML
centang Expand Template Widget
cari kode </head>
Copy & Paste Kode Dibawah
taruh di atas </head>

<style>
#md-loading {
position: fixed;
z-index: 50;
top: 0; left: 0;
width: 100%; height: 100%;
background: #FDFEF8 url(http://1.bp.blogspot.com/-oihuvyFdV78/UA0jMnQeZUI/AAAAAAAADeg/_3dvib8GVzs/s1600/MD-Lodding.gif) no-repeat center;
line-height: 350px;
text-align: center;
font-size: 36px;
color: #353231;
text-indent: -9999px;
}
.MD #md-loading { display: none; }

@media only screen and (device-width: 768px) {
#loading {
position:absolute;
width:1040px;
min-height:768px;
}
}
#md-progress-bar {
position: absolute;
top: 0; left: 0;
background: #de1301;
opacity: 0.8;
width: 0;
height: 18px;
}
#md-loader {
height: 100%;
display: none;
}
</style>
<script>

(function($){

$("html").removeClass("MD");


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


$(window).load(function(){

$("#md-progress-bar").stop().animate({ width: "100%" },600,function(){
$("#md-loading").fadeOut("fast",function(){ $(this).remove(); });
});

});
})(jQuery);
</script>

Berikutnya cari <body>
Copy & Paste Kode Dibawah
setelah <body>

<div id='md-loading'><div id='md-progress-bar'></div><div id='md-loader'>Loading...</div></div>

0 komentar — Skip ke Kotak Komentar

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: : :l: :m: :n: : : :q: :r: :s: :t: :u: :v: :w: : :y: Emotion lainnya?

Posting Komentar — or Kembali ke Postingan