Membuat Progress Loading Bar Blog Seperti Youtube

Membuat Progress Loading Bar Blog Seperti Youtube. Sobat blogger, jika anda adalah seorang yang sering melihat sebuah video di youtube maka ketika kita membuka salah satu video, akan ada progress loading di bagian atas bar panjang berwarna merah, dan untuk sebuah loading..cukup keren bukan hehe, nah pada kesempatan kali ini saya akan membuatkan tutorial cara membuat progress loading bar blog kita bisa seperti di tampilan youtube tersebut, bisa dibilang ini sebuah hiasan blog agar blog kita terlihat lebih keren dan cantik, oke next ke tutorial membuat progress loading bar blog seperti di youtube.

Membuat Progress Loading Bar Blog Seperti Youtube

Anda bisa lihat di gambar gif tersebut, terlihat garis merah di bagian bar atas saat progress loading youtube, itulah sample untuk demonya.

Membuat Progress Loading Bar Blog Seperti Youtube

1. Buka akun blogger.
2. Pilih menu template > Edit HTML
3. Lalu letakan kode dibawah ini tepat di atas kode </body>

 <script type='text/javascript'>
//<![CDATA[
var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"2px",zIndex:9999,top:"0"},l={width:0,height:"100%",clear:"both",transition:"height .3s"};c=function(a,b){for(var c in b)a.style[c]=b[c];a.style["float"]="left"};f=function(){var a=this,b=this.width-this.here;0.1>b&&-0.1<b?(g.call(this,this.here),this.moving=!1,100==this.width&&(this.el.style.height=0,setTimeout(function(){a.cont.el.removeChild(a.el)},100))):(g.call(this,this.width-b/4),setTimeout(function(){a.go()},16))};g=function(a){this.width=
a;this.el.style.width=this.width+"%"};h=function(){var a=new d(this);this.bars.unshift(a)};d=function(a){this.el=document.createElement("div");this.el.style.backgroundColor=a.opts.bg;this.here=this.width=0;this.moving=!1;this.cont=a;c(this.el,l);a.el.appendChild(this.el)};d.prototype.go=function(a){a?(this.here=a,this.moving||(this.moving=!0,f.call(this))):this.moving&&f.call(this)};e=function(a){a=this.opts=a||{};var b;a.bg=a.bg||"#db3131";this.bars=[];b=this.el=document.createElement("div");c(this.el,
k);a.id&&(b.id=a.id);b.style.position=a.target?"relative":"fixed";a.target?a.target.insertBefore(b,a.target.firstChild):document.getElementsByTagName("body")[0].appendChild(b);h.call(this)};e.prototype.go=function(a){this.bars[0].go(a);100==a&&h.call(this)};return e}();
var nanobar = new Nanobar();nanobar.go(30);nanobar.go(60);nanobar.go(100);
//]]>
</script>

height:"2px" = Ketebalan garis warna merah loading progress
#db3131" = Ini adalah kode warna, silahkan rubah sesuka hati anda.

Sekian tutorial di "Cara Membuat Progress Loading Bar Blog Seperti Youtube" semoga bermanfaat.

Source : http://www.kompiajaib.com/2014/11/membuat-progress-loading-bar-blog.html

9 Responses to "Membuat Progress Loading Bar Blog Seperti Youtube"

  1. Artikel ini memberikan wawasan terbaru buat saya, wacana pembahasan ini sangat bermanfaat.
    http://jellygamatgoldg31.com/obat-herbal-maag/

    ReplyDelete
  2. ilmu yang sangat bermanfaat nih, terimakasih gan :)
    http://kedaijellygamatgoldg.com

    ReplyDelete
  3. Mampur juga ke blig ane gaN
    http://www.oppung com

    ReplyDelete
  4. Mampur juga ke blig ane gaN
    http://www.oppung com

    ReplyDelete
  5. #BOOM udah dicoba gan Work banget hehehe ilmu baru
    http://www.brofariz.xyz/

    ReplyDelete
  6. CAra buat gift seperti itu gimana mas.?

    ReplyDelete
  7. Tanks ilmu nya work :)
    https://microsoftelektronika.blogspot.co.id

    ReplyDelete
  8. Gabung yuk di situs judi kami,

    terpercaya, Domino 99, bandarQ, Hanya di

    CebanQQ, c*m
    Bonus cashback: 0.4%
    Refferal: 20%
    Bagi member baru tingkat kemenangan diatas 78%+

    berdasarkan statistik bosku :)
    tunggu promo menarik dari kami :)

    ReplyDelete
  9. In addition to optimizing your YouTube channel, you can also optimize your videos in a number of ways that will help them to get discovered more easily. Make HD Videos - The first thing to do here is to ensure that your videos are HD and that they have HD thumbnails. Try to avoid shaky cameras or stolen content. vues de youtube

    ReplyDelete