Berikut adalah step by step membuat Loading garis seperti youtube Pada Blog:
1. Javascript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></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>
2. CSS
Letakkan kode css dibawah ini pada bagian b:skin untuk blogger.
#loading {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 10px;
line-height: 350px;
text-align: center;
padding-top:70px;
font:bold 50px Calibri,Arial,Sans-Serif;
color: #000000;
}
.v2 #loading {
display: none
}
#progress-bar {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color:#fd0000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: 0.8;
width: 0;
height: 10px;
}
#loader {
top:0;
left:0;
width:100%;
height: 10px;
position:fixed;
display: block;
color:#FFCC66;
background: #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: 0.8;
}
3. Element DIV
Dan juga letakkan elemen div dibawah ini tepat di dalam elemen <body>
<div id='loading'><div id='progress-bar'></div><div id='loader'></div></div>
1. Javascript
Letakkan kode dibawah ini diatas </head>. Kode dibawah ini terdapat Jquery dari ajax.googleapis.com. Agar berjalan dengan baik, kamu harus terkoneksi ke internet untuk memanggil kode Jquery dari google tersebut.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></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>
2. CSS
Letakkan kode css dibawah ini pada bagian b:skin untuk blogger.
#loading {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 10px;
line-height: 350px;
text-align: center;
padding-top:70px;
font:bold 50px Calibri,Arial,Sans-Serif;
color: #000000;
}
.v2 #loading {
display: none
}
#progress-bar {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color:#fd0000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: 0.8;
width: 0;
height: 10px;
}
#loader {
top:0;
left:0;
width:100%;
height: 10px;
position:fixed;
display: block;
color:#FFCC66;
background: #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: 0.8;
}
3. Element DIV
Dan juga letakkan elemen div dibawah ini tepat di dalam elemen <body>
<div id='loading'><div id='progress-bar'></div><div id='loader'></div></div>
1 komentar:
Makasih ya gan infonya
http://ontvspot.blogspot.com
Ontvspot TV Online, TV Live Stream, Entertainment Channel online on internet.
Posting Komentar