×

Owner / Author / Admin / etc

    Rahman NM    

"Pada halaman web ini saya akan membagikan informasi informasi menarik seputar Anime, Manga, Game, Film, dan juga berbagai tips-tips menarik lainnya."

Cara Membuat Loading Progress Bar Seperti Youtube di Blog

February 23, 2020   • 3 Comments

Pada kesempatan kali ini saya akan membagikan sebuah tutorial bagaimana cara membuat loading progress bar seperti youtube diblog. Jika kamu sering membuka youtube kamu pasti pernah melihat ada sebuah loading berwarna merah diatas menu pencarian youtube tersebut, Nah disini saya akan membagikan tutorial seperti itu.

Walaupun pengunjung blog jarang memperhatikan adanya loading progress bar seperti youtube diblog kamu, tentunya fitur loading progressbar ini dapat memperindah tampilan loading blog kamu dan terlihat beda dari blog biasanya.

Untuk Demo loading progress bar seperti youtube ini dapat kamu lihat langsung diyoutubenya, yuk langsung saja bagaimana cara membuat fitur loading progress bar seperti youtube diblog.

Cara Membuat Loading Progress Bar Seperti Youtube di Blogger

1. Pertama, login terlebih dahulu ke Blogger,
2. Kemudian, pada dashboard Blogger pilih Tema ⇒ Edit HTML,
3. Lalu, copy kode Javascript dibawah ini dan letakkan tepat diatas 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||"#b50000";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>
Perhatikan kode yang saya beri highlighter gradient, silahkan Atur height:"2px" sesuai keinginan dan atur juga warna loading progress bar #b50000  sesuai keinginan.
4. Terakhir simpan atau save template tersebut.

Akhir Kata
Sekian tutorial membuat progress bar seperti youtube di blogger yang dapat saya bagikan untuk kamu, semoga dengan adanya tutorial ini dapat memperindah blog kamu dan terlihat lebih beda ketimbang blog biasanya, dan Semoga Bermanfaat :D


Creativity of codes and exploiting, with code we can do something fun.
Facebook Instagram Twitter
Show Comments!
Hide comments

3 Responses to "Cara Membuat Loading Progress Bar Seperti Youtube di Blog"

Kebijakan berkomentar :

Berkomentarlah dengan tata bahasa yang baik, agar orang tau sebijak apa karakter anda melalui kata-kata,

Silahkan berkomentar apapun selagi masih berhubungan dengan halaman postingan ini,

Dilarang berkomentar menggunakan Link Aktif,

Centang Notife Me agar mendapatkan notifikasi balasan komentar admin melalui Email.

  1. Baru aja dipasang semalem udh langsung dibuat tutorial nya :v, btw mantau blog ane trs nih yeee :v

    ReplyDelete
    Replies
    1. lah ? kwkwkwk

      Ini juga draft yang belum keposting om :v
      Mampir keblog mu jarang om kwkwkwkw, paling klo situ komen ya kunjung balik, biar serasa enak gitu sesama blogger

      Delete
  2. mau make ahh, ijin make om.
    mampir juga ke bacaberdua ya om

    ReplyDelete

Iklan Atas Artikel

Iklan Tengah Artikel

Iklan Tengah Artikel 2

Iklan Bawah Artikel

© Copyright 2020 Anirock Site - All Rights Reserved Created With