Penyanyi : Cara membuat Loading garis seperti youtube
Judul lagu : Cara membuat Loading garis seperti youtube
Cara membuat Loading garis seperti youtube
Artikel Cara,
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>
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>
Demikianlah Artikel Cara membuat Loading garis seperti youtube
Sekian Tutorial Blog dan Seo Cara membuat Loading garis seperti youtube, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingan Tutorial Blog dan Seo kali ini.
0 Response to "Cara membuat Loading garis seperti youtube"
Posting Komentar