menambahkan efek loading halaman jQuery untuk blogger
ya mungkin udh pada banyak di blog2 lain :DDemo
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSaqwR1sTP7Z7QZwAYZKPEFptAyowYDRXA03bphm7U_OBcwCmPVnDU-MJ0iI5ZmhqUw3xhHpR6BOtiYwKCaNVTjuuOldRaDFh-CWv5STBWPzGd1WfTQSUf8bx5HqStlRLKbWw4bHAzUEeM/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>
Demikian artikel tentang Membuat efek loading halaman blog ini dapat kami sampaikan, semoga artikel atau info tentang Membuat efek loading halaman blog ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.