Cara membuat Loading Header Blog mirip Youtube
09.18.00
1 Comment
 |
| Loading Header di Youtube |
Rachmatalamsyah.com - Pada kesempatan ini saya akan memberikan info bagaimana cara membuat loading blog bentuk garis merah pada header seperti yang ada di youtube dengan judul artikel kali ini adalah Cara membuat Loading Header Blog mirip Youtube. Baik,untuk membuat Loading header youtube ini sangat mudah tergantung dari proses / langkah-langkahnya. Untuk Demonya sendiri bisa di lihat pada website ini atau di Youtube.
Berikut langkah-langkah pembuatan Loading Header Blog mirip Youtube :
1. Login Blogger
Masuk ke blogger kemudian klik Template > klik Edit Html
2. Pasang Kode 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>
<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. Letakkan Kode CSS
Masih dalam Edit Html Blog,kemudian Letakkan Kode CSS dibawah ini pada bagian b:skin / ></b:skin> :
#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;
}
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. Letakkan Elemen DIV
Fungsi elemen div sendiri adalah untuk menampilkan atau menjalankan kode CSS yang telah dipasang diatas,jadi pastikan anda masih dalam mode edit html dan letakkan elemen div dibawah ini didalam elemen <body> :
<div id='loading'><div id='progress-bar'></div><div id='loader'></div></div>
4. Terakhir Silahkan klik Simpan Template
Untuk melihat hasilnya tetap pada mode edit Html dan Cukup Klik Lihat Blog saja pada bilah sebelah sudut kiri blog,dan lihat hasilnya.
Cat : Anda bisa melakukan Modifikasi pada kode seperti merubah warna,ukuran dan kecepatan tapi untuk kecepatan mungkin sesuai dengan load blog anda sendiri.
Demikian informasi mengenai Cara membuat Loading Header Blog mirip Youtube semoga anda bisa menerapkannya di blog sesuai dengan langkah-langkah yang saya jelaskan diatas, Apabila ada pertanyaan silahkan tulis di bawah di kolom komentar.
Saya hanyalah satu dari sekian banyak Blogger yang terus menulis untuk memberikan Informasi kepada Pembaca.
1 Response to "Cara membuat Loading Header Blog mirip Youtube"
Thanks for information, that's make me good in conditional.
Feed back please http://animesakuin.blogspot.co.id/
Posting Komentar