Cara membuat Loading Header Blog mirip Youtube

Cara membuat Loading Header Blog mirip Youtube
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>

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;
}

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.

Artikel Terkait

Cara membuat Loading Header Blog mirip Youtube
4/ 5
Oleh

Berlangganan

Suka dengan artikel di atas? Silakan berlangganan gratis via email

1 komentar:

  1. Thanks for information, that's make me good in conditional.
    Feed back please http://animesakuin.blogspot.co.id/

    ReplyDelete

Terimakasih telah berkomentar,saya akan menampilkan komentar anda segera setelah saya setujui.